Tweak bottom of space panel buttons in expanded state (#7213)

res/css/structures/_QuickSettingsButton.scss

@@ -16,17 +16,26 @@ limitations under the License.
 
 .mx_QuickSettingsButton {
     flex: 0 0 auto;
-    width: 32px;
-    height: 32px;
     border-radius: 8px;
     position: relative;
     margin: 12px auto;
+    color: $secondary-content;
+    min-width: 32px;
+    min-height: 32px;
+    line-height: 32px;
+
+    &.expanded {
+        margin-left: 20px;
+        padding-left: 44px; // align with toggle collapse button text
+        padding-right: 8px;
+    }
 
     &::before {
         content: "";
         position: absolute;
-        width: inherit;
-        height: inherit;
+        width: 32px;
+        height: 32px;
+        left: 0;
         mask-image: url('$(res)/img/element-icons/settings.svg');
         mask-repeat: no-repeat;
         mask-position: center;
@@ -34,7 +43,7 @@ limitations under the License.
         background: $secondary-content;
     }
 
-    &:hover {
+    &:not(.expanded):hover {
         background-color: $quaternary-content;
 
         &::before {

res/css/structures/_SpacePanel.scss

@@ -41,18 +41,34 @@ $activeBorderColor: $secondary-content;
     }
 
     .mx_SpacePanel_toggleCollapse {
-        flex: 0 0 auto;
-        width: 40px;
-        height: 40px;
-        mask-position: center;
-        mask-size: 32px;
-        mask-repeat: no-repeat;
-        margin-left: $gutterSize;
-        background-color: $tertiary-content;
-        mask-image: url('$(res)/img/element-icons/expand-space-panel.svg');
+        margin: 0 auto;
+        position: relative;
+        min-width: 32px;
+        min-height: 32px;
+        line-height: 32px;
+        color: $secondary-content;
+
+        &::before {
+            content: "";
+            position: absolute;
+            width: 32px;
+            height: 32px;
+            left: 0;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background-color: $secondary-content;
+            mask-image: url('$(res)/img/element-icons/expand-space-panel.svg');
+        }
 
         &.expanded {
-            transform: scaleX(-1);
+            padding-left: 48px;
+            padding-right: 8px;
+            margin-left: $gutterSize;
+
+            &::before {
+                transform: scaleX(-1);
+            }
         }
     }