Horizontal: spacing

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

res/css/views/right_panel/_ThreadPanel.scss

@@ -20,10 +20,6 @@ limitations under the License.
     height: 100px;
     overflow: visible;
 
-    &:not(.mx_ThreadView).mx_BaseCard {
-        padding-right: 2px;
-    }
-
     .mx_BaseCard_header {
         margin-bottom: 12px;
 
@@ -111,15 +107,11 @@ limitations under the License.
     .mx_AutoHideScrollbar {
         background-color: $background;
         border-radius: 8px;
-        width: calc(100% - 6px); // 6px: 8px - 2px (&:not(.mx_ThreadView).mx_BaseCard)
         padding-inline-end: 0;
+        overflow-y: scroll; // set gap between the thread tile and the right border
     }
 
     &.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
-        /* the scrollbar is 8px wide, and we want a 12px gap with the side of the
-        panel. Hence the magic number, 8+4=12 */
-        width: calc(100% + 6px);
-        padding-right: 4px;
         position: relative;
         min-height: 0; // don't displace the composer
         flex-grow: 1;
@@ -131,7 +123,7 @@ limitations under the License.
 
     .mx_RoomView_messagePanel { // To avoid the rule from being applied to .mx_ThreadPanel_empty
         .mx_RoomView_messageListWrapper {
-            width: calc(100% + $spacing-8); // 8px: scroll bar width
+            width: calc(100% + 6px); // 8px - 2px
         }
     }
 
@@ -292,7 +284,6 @@ limitations under the License.
     top: 0;
     bottom: 0;
     left: 0;
-    right: 6px;
     padding: 20px;
 
     h2 {

res/css/views/rooms/_EventTile.scss

@@ -710,33 +710,7 @@ $eventTileZIndex: 10;
 }
 
 .mx_GroupLayout {
-    &[data-scrollbar=true] {
-        .mx_EventTile[data-shape=ThreadsList],
-        .mx_RoomView_MessageList {
-            // If scroll bar is enabled, its area creates 8px spacing
-            margin-inline-end: 0;
-        }
-
-        .mx_RoomView_messageListWrapper {
-            width: calc(100% + 6px); // 6px: .mx_ThreadPanel .mx_AutoHideScrollbar
-        }
-    }
-
-    &[data-scrollbar=false] {
-        .mx_EventTile[data-shape=ThreadsList] {
-            // Remove default margin
-            margin-inline-end: 0;
-        }
-
-        .mx_RoomView_MessageList {
-            // Set 8px spacing between the thread list and the right border
-            margin-inline-end: $spacing-8;
-        }
-    }
-
     .mx_EventTile[data-shape=ThreadsList] {
-        padding-inline-end: $spacing-24; // 24px: 32px - 8px (create a 24px gap when a thread on the list is hovered)
-
         .mx_EventTile_line {
             padding-bottom: 0; // Override mx_EventTile_line on _GroupLayout.scss
         }
@@ -758,8 +732,8 @@ $eventTileZIndex: 10;
     $borderRadius: 8px;
     $padding: $spacing-8;
 
-    margin: var(--topOffset) 14px var(--topOffset) 0; // 14px: 32px - 18px (padding of mx_AutoHideScrollbar)
-    padding: $padding;
+    margin: var(--topOffset) 0;
+    padding: $padding $spacing-24 $padding $padding;
     border-radius: $borderRadius;
 
     display: flex;
@@ -889,13 +863,6 @@ $eventTileZIndex: 10;
         padding-top: 14px; // due to layout differences, this odd number matches the 18px padding-top of main tl events
     }
 
-    .mx_RoomView_messagePanel[data-scrollbar=false] {
-        .mx_EventTile[data-layout="bubble"] {
-            // Create 8px gap between the avatar and the right border
-            margin-inline-end: 44px; // 44px: 36px + 8px (scroll bar area width)
-        }
-    }
-
     .mx_EventTile[data-layout=bubble] {
         margin-left: 36px;
         margin-right: 36px;