Fix visual regression

florianduros · florianduros · commit fbee2ada6f69 · 2024-02-28T14:13:03.000+01:00
diff --git a/res/css/structures/_ThreadsActivityCentre.pcss b/res/css/structures/_ThreadsActivityCentre.pcss
@@ -22,15 +22,21 @@
 
     &.expanded {
         /* align with settings icon */
-        margin-left: 22px;
+        margin-left: 21px;
 
+        /**
+         * modify internal css of the compound component
+         * dirty but we need to add the `Threads` label into the indicator icon button
+         **/
         & > div {
             display: flex;
+            align-items: center;
         }
 
         & .mx_ThreadsActivityCentreButton_Icon {
             /* align with settings label */
             margin-right: 14px;
+            /* required to set the icon width when into a flex container */
             min-width: 24px;
         }
 
diff --git a/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx b/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx
@@ -63,6 +63,7 @@ export const ThreadsActivityCentreButton = forwardRef<HTMLDivElement, ThreadsAct
                 >
                     <>
                         <Icon className="mx_ThreadsActivityCentreButton_Icon" />
+                        {/* This is dirty, but we need to add the label to the indicator icon */}
                         {displayLabel && (
                             <Text
                                 className="mx_ThreadsActivityCentreButton_Text"

Original file line number	Diff line number	Diff line change
`@@ -63,6 +63,7 @@ export const ThreadsActivityCentreButton = forwardRef<HTMLDivElement, ThreadsAct`
`63`	`63`	`>`
`64`	`64`	`<>`
`65`	`65`	`<Icon className="mx_ThreadsActivityCentreButton_Icon" />`
	`66`	`+ {/* This is dirty, but we need to add the label to the indicator icon */}`
`66`	`67`	`{displayLabel && (`
`67`	`68`	`<Text`
`68`	`69`	`className="mx_ThreadsActivityCentreButton_Text"`