fix alignments and iterate PR

res/css/views/right_panel/_BaseCard.scss

@@ -24,7 +24,7 @@ limitations under the License.
     .mx_BaseCard_header {
         margin: 8px 0;
 
-        h2 {
+        > h2 {
             margin: 0 44px;
             font-size: $font-18px;
             font-weight: $font-semi-bold;
@@ -89,11 +89,11 @@ limitations under the License.
         margin: 20px 0 16px;
 
         & > * {
-            margin-left: 10px;
-            margin-right: 10px;
+            margin-left: 12px;
+            margin-right: 12px;
         }
 
-        h1 {
+        > h1 {
             color: $tertiary-fg-color;
             font-size: $font-12px;
             font-weight: 500;

res/css/views/right_panel/_RoomSummaryCard.scss

@@ -15,16 +15,6 @@ limitations under the License.
 */
 
 .mx_RoomSummaryCard {
-    // shrink left gutter by 12 and instead add it as margin to all things except the buttons
-    // as their hover effect should go into the gutter
-    & > * {
-        margin-left: 10px;
-        margin-right: 10px;
-    }
-    .mx_AutoHideScrollbar {
-        margin-left: 0;
-    }
-
     .mx_BaseCard_header {
         text-align: center;
         margin-top: 20px;
@@ -88,13 +78,13 @@ limitations under the License.
 
     .mx_RoomSummaryCard_aboutGroup {
         .mx_RoomSummaryCard_Button {
-            padding-left: 48px;
+            padding-left: 44px;
 
             &::before {
                 content: '';
                 position: absolute;
                 top: 8px;
-                left: 8px;
+                left: 10px;
                 height: 24px;
                 width: 24px;
                 mask-repeat: no-repeat;
@@ -106,7 +96,7 @@ limitations under the License.
 
     .mx_RoomSummaryCard_appsGroup {
         .mx_RoomSummaryCard_Button {
-            padding-left: 10px;
+            padding-left: 12px;
             color: $tertiary-fg-color;
 
             span {
@@ -115,7 +105,7 @@ limitations under the License.
 
             img {
                 vertical-align: top;
-                margin-right: 18px;
+                margin-right: 12px;
                 border-radius: 4px;
             }
 

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -148,11 +148,13 @@ const AppsSection: React.FC<IAppsSectionProps> = ({ room }) => {
                 });
             };
 
-            return <Button key={app.id} className={classes} onClick={onOpenWidgetClick}>
-                <BaseAvatar name={app.id} urls={iconUrls} width={20} height={20} />
-                <span>{name}</span>
-                { subtitle }
-            </Button>;
+            return (
+                <Button key={app.id} className={classes} onClick={onOpenWidgetClick}>
+                    <BaseAvatar name={app.id} urls={iconUrls} width={20} height={20} />
+                    <span>{name}</span>
+                    { subtitle }
+                </Button>
+            );
         }) }
 
         <AccessibleButton kind="link" onClick={onManageIntegrations}>