[bugfix] various CSS fixes (#100)

Some fixes for the CSS / Phosphor revamp

- Corrected avatar position
- Corrected various button/icon sizes
- Change the way a status background is set
- Improved icon-button disabled state
- Improved contrast and light theme colours

commit b307fa93b4
Author: Zoë Bijl <code@moiety.me>
Date:   Wed Oct 15 17:49:11 2025 +0200

    [chore] lint

commit 1352425b81
Author: Zoë Bijl <code@moiety.me>
Date:   Wed Oct 15 17:46:42 2025 +0200

    [chore] lint

commit 276480b5a4
Author: Zoë Bijl <code@moiety.me>
Date:   Wed Oct 15 17:46:32 2025 +0200

    [bugfix] set direct message background

commit 4e5764a70b
Author: Zoë Bijl <code@moiety.me>
Date:   Wed Oct 15 17:44:46 2025 +0200

    [bugfix] improve obviousness of disabled icon button state

commit dec5bb66e7
Author: Zoë Bijl <code@moiety.me>
Date:   Wed Oct 15 16:52:55 2025 +0200

    [chore] lint

commit 72869917ab
Author: Zoë Bijl <code@moiety.me>
Date:   Wed Oct 15 16:52:44 2025 +0200

    [bugfix] start work on status content spacing

commit 5aa8333f71
Author: Zoë Bijl <code@moiety.me>
Date:   Wed Oct 15 15:57:56 2025 +0200

    lint

commit df0bb84ce4
Author: Zoë Bijl <code@moiety.me>
Date:   Wed Oct 15 15:57:48 2025 +0200

    [bugfix] correctly set status background (on focus)

    fixes an issue where a weird gradient would show up in the status__info section

commit 2fab5ff2e7
Author: Zoë Bijl <code@moiety.me>
Date:   Wed Oct 15 09:40:28 2025 +0200

    [bugfix] fix lint issues

commit 5d823b2195
Author: Zoë Bijl <code@moiety.me>
Date:   Wed Oct 15 01:19:01 2025 +0200

    [bugfix] set avatars to cover available space

    no more squashed avatars

app/javascript/flavours/glitch/components/avatar.tsx

@@ -28,7 +28,8 @@ export const Avatar: React.FC<Props> = ({
     ...styleFromParent,
     width: `${size}px`,
     height: `${size}px`,
-    backgroundSize: `${size}px ${size}px`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
   };
 
   if (account) {

app/javascript/flavours/glitch/components/status_content.jsx

@@ -354,16 +354,12 @@ class StatusContent extends PureComponent {
 
       return (
         <div className={classNames} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
-          <p
-            style={{ marginBottom: hidden && status.get("mentions").isEmpty() ? "0px" : null }}
-          >
-            <span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={language} />
-            {" "}
-            <button type='button' className='status__content__spoiler-link' onClick={this.handleSpoilerClick} aria-expanded={!hidden}>
-              <Icon id={hidden ? "eye-closed" : "eye"} />
-              {toggleText}
-            </button>
-          </p>
+          <span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={language} />
+          {" "}
+          <button type='button' className='status__content__spoiler-link' onClick={this.handleSpoilerClick} aria-expanded={!hidden}>
+            <Icon id={hidden ? "eye-closed" : "eye"} />
+            {toggleText}
+          </button>
 
           {mentionsPlaceholder}
 

app/javascript/flavours/glitch/styles/_mixins.scss

@@ -10,7 +10,7 @@
   background-size: $size $size;
 }
 
-@mixin single-column($media, $parent: '&') {
+@mixin single-column($media, $parent: "&") {
   .auto-columns #{$parent} {
     @media #{$media} {
       @content;
@@ -21,7 +21,7 @@
   }
 }
 
-@mixin limited-single-column($media, $parent: '&') {
+@mixin limited-single-column($media, $parent: "&") {
   .auto-columns #{$parent},
   .single-column #{$parent} {
     @media #{$media} {
@@ -30,7 +30,7 @@
   }
 }
 
-@mixin multi-columns($media, $parent: '&') {
+@mixin multi-columns($media, $parent: "&") {
   .auto-columns #{$parent} {
     @media #{$media} {
       @content;
@@ -45,7 +45,7 @@
   &.full-width {
     margin-left: -10px;
     margin-right: -10px;
-    width: inherit;
+    width: calc(100% + 20px);
     max-width: none;
     border-radius: 0;
   }

app/javascript/flavours/glitch/styles/components/media.scss

@@ -66,7 +66,6 @@
 
 .media-gallery {
   box-sizing: border-box;
-  margin-top: 8px;
   overflow: hidden;
   border-radius: 4px;
   position: relative;
@@ -671,7 +670,7 @@
     }
 
     &::before {
-      content: '';
+      content: "";
       width: 50px;
       background: rgba($white, 0.35);
       border-radius: 4px;
@@ -741,7 +740,7 @@
     position: relative;
 
     &::before {
-      content: '';
+      content: "";
       width: 100%;
       background: rgba($white, 0.35);
       border-radius: 4px;

app/javascript/flavours/glitch/styles/components/misc.scss

@@ -180,7 +180,7 @@
   }
 
   &.disabled {
-    color: darken($action-button-color, 13%);
+    opacity: 0.3;
     background-color: transparent;
     cursor: default;
   }
@@ -223,7 +223,6 @@
     }
 
     &.disabled {
-      color: lighten($lighter-text-color, 7%);
       background-color: transparent;
     }
 
@@ -344,7 +343,7 @@ body > [data-popper-placement] {
 
 .ellipsis {
   &::after {
-    content: '…';
+    content: "…";
   }
 }
 
@@ -471,7 +470,7 @@ body > [data-popper-placement] {
   .image-loader__preview-canvas {
     max-width: $media-modal-media-max-width;
     max-height: $media-modal-media-max-height;
-    background: url('~images/void.png') repeat;
+    background: url("~images/void.png") repeat;
     object-fit: contain;
   }
 
@@ -729,7 +728,7 @@ body > [data-popper-placement] {
   &:hover,
   &:focus,
   &:active {
-    @include multi-columns('screen and (min-width: 631px)') {
+    @include multi-columns("screen and (min-width: 631px)") {
       background: lighten($ui-base-color, 14%);
       border-bottom-color: lighten($ui-base-color, 14%);
     }
@@ -1054,7 +1053,7 @@ body > [data-popper-placement] {
     border-bottom-color: $ui-highlight-color;
   }
 
-  @include limited-single-column('screen and (max-width: 600px)') {
+  @include limited-single-column("screen and (max-width: 600px)") {
     font-size: 16px;
   }
 
@@ -1150,7 +1149,7 @@ button.icon-button.active i.fa-retweet {
   padding-top: 20px + 48px;
 
   .regeneration-indicator__figure {
-    background-image: url('~flavours/glitch/images/elephant_ui_disappointed.svg');
+    background-image: url("~flavours/glitch/images/elephant_ui_disappointed.svg");
   }
 }
 

app/javascript/flavours/glitch/styles/components/status.scss

@@ -169,12 +169,8 @@
     outline: 0;
     background: lighten($ui-base-color, 4%);
 
-    &.status.status-direct {
-      background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
-
-      &.muted {
-        background: transparent;
-      }
+    &.status.status-direct.muted {
+      background: transparent;
     }
 
     .detailed-status,
@@ -219,7 +215,7 @@
   }
 
   &.status-direct {
-    background: mix($ui-base-color, $ui-highlight-color, 95%);
+    --color-status-bg: #{mix($ui-base-color, $ui-highlight-color, 95%)};
     border-bottom-color: lighten($ui-base-color, 12%);
   }
 
@@ -277,7 +273,7 @@
         rgba($base-shadow-color, 0.8)
       );
       pointer-events: none;
-      content: '';
+      content: "";
     }
 
     .display-name:hover .display-name__html {
@@ -291,7 +287,7 @@
       padding-top: 0;
 
       &::after {
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         bottom: 0;
@@ -918,7 +914,7 @@ a.status-card.compact:hover {
 
   &.unread {
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       top: 0;
       inset-inline-start: 0;
@@ -956,7 +952,7 @@ a.status-card.compact:hover {
       height: 100%;
 
       &::before {
-        content: '';
+        content: "";
         display: block;
         position: absolute;
         top: 10px - 4px;

app/javascript/flavours/glitch/styles/gts/colors.scss

@@ -70,4 +70,5 @@
     /* Status */
     --color-status-fg: ;
     --color-status-bg: #282c37;
+    --color-status-bg--focus: #313543;
 }

app/javascript/flavours/glitch/styles/gts/media-gallery.scss

@@ -0,0 +1 @@
+/* 🖼️ Media Gallery */

app/javascript/flavours/glitch/styles/gts/status.scss

@@ -1,15 +1,32 @@
 /* 🚥 Status */
-@import 'status/status-account';
-@import 'status/status-display-name';
-@import 'status/status-icons';
-@import 'status/status-info';
-@import 'status/status-prepend';
-@import 'status/status-spoiler';
+@import "status/status-account";
+@import "status/status-display-name";
+@import "status/status-icons";
+@import "status/status-info";
+@import "status/status-prepend";
+@import "status/status-spoiler";
 
-.status__content {
+.status {
+    background-color: var(--color-status-bg);
+
+    &.focusable:focus {
+        --color-status-bg: var(--color-status-bg--focus);
+    }
+}
+
+.status__content,
+.detailed-status .status__content {
     line-height: 1.5;
 }
 
+.status__content p {
+    margin-bottom: 12px;
+}
+
+.media-gallery {
+    margin-top: 16px;
+}
+
 .status__action-bar :is(a, button) {
     color: var(--color-secondary-fg);
 }

app/javascript/flavours/glitch/styles/gts/status/status-spoiler.scss

@@ -2,7 +2,6 @@
 .status__content__spoiler-link {
     display: flex;
     gap: 5px;
-    margin-top: 5px;
     padding: 5px 8px;
     border: 1px solid var(--color-accent-lines);
     border-radius: 8px;

app/javascript/flavours/glitch/styles/mastodon-light/colors.scss

@@ -40,4 +40,5 @@
   /* Status */
   --color-status-fg: var(--color-fg);
   --color-status-bg: #fff;
+  --color-status-bg--focus: hsl(0, 0%, 96%);
 }

app/javascript/flavours/glitch/styles/polls.scss

@@ -76,8 +76,8 @@
       max-width: calc(100% - 45px - 25px);
     }
 
-    input[type='radio'],
-    input[type='checkbox'] {
+    input[type="radio"],
+    input[type="checkbox"] {
       display: none;
     }
 
@@ -85,7 +85,7 @@
       flex: 1 1 auto;
     }
 
-    input[type='text'] {
+    input[type="text"] {
       display: block;
       box-sizing: border-box;
       width: 100%;
@@ -303,10 +303,6 @@
     padding: 6px 10px;
     padding-inline-end: 30px;
   }
-
-  .icon-button.disabled {
-    color: darken($simple-background-color, 14%);
-  }
 }
 
 .muted .poll {