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 {