From 3f743b1a070ffe0ae2822d38f0aaedd0a78112c5 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Sat, 21 Jun 2025 10:58:12 +0200
Subject: [PATCH] fix: Fix SCSS lint warnings (#35102)

---
 .../styles/mastodon/components.scss           | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 506e2f026..81fde8782 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1185,6 +1185,7 @@ body > [data-popper-placement] {
     line-height: 20px;
     letter-spacing: 0.25px;
     display: -webkit-box;
+    line-clamp: 4;
     -webkit-line-clamp: 4;
     -webkit-box-orient: vertical;
     padding: 0;
@@ -1263,6 +1264,7 @@ body > [data-popper-placement] {
     letter-spacing: 0.25px;
     padding-top: 0 !important;
     display: -webkit-box;
+    line-clamp: 4;
     -webkit-line-clamp: 4;
     -webkit-box-orient: vertical;
     max-height: 4 * 20px;
@@ -2100,6 +2102,7 @@ body > [data-popper-placement] {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
+    line-clamp: 1;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     margin-top: 10px;
@@ -3124,7 +3127,7 @@ a.account__display-name {
   }
 }
 
-@media screen and (max-width: $no-gap-breakpoint - 1px) {
+@media screen and (max-width: ($no-gap-breakpoint - 1px)) {
   $sidebar-width: 285px;
 
   .columns-area__panels__main {
@@ -3324,7 +3327,7 @@ a.account__display-name {
   }
 }
 
-@media screen and (max-width: $no-gap-breakpoint - 1px) {
+@media screen and (max-width: ($no-gap-breakpoint - 1px)) {
   .columns-area__panels__pane--compositional {
     display: none;
   }
@@ -3565,19 +3568,19 @@ a.account__display-name {
     }
   }
 
-  @media screen and (height <= 930px - 56px) {
+  @media screen and (height <= (930px - 56px)) {
     &__portal .trends__item:nth-child(n + 4) {
       display: none;
     }
   }
 
-  @media screen and (height <= 930px - (56px * 2)) {
+  @media screen and (height <= (930px - 56px * 2)) {
     &__portal .trends__item:nth-child(n + 3) {
       display: none;
     }
   }
 
-  @media screen and (height <= 930px - (56px * 3)) {
+  @media screen and (height <= (930px - 56px * 3)) {
     &__portal {
       display: none;
     }
@@ -4110,6 +4113,7 @@ a.status-card {
 .status-card.expanded .status-card__title {
   white-space: normal;
   display: -webkit-box;
+  line-clamp: 2;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
@@ -6153,6 +6157,7 @@ a.status-card {
       font-size: 15px;
       line-height: 22px;
       color: $dark-text-color;
+      line-clamp: 4;
       -webkit-line-clamp: 4;
       -webkit-box-orient: vertical;
       max-height: 4 * 22px;
@@ -7717,7 +7722,7 @@ a.status-card {
   display: flex;
   flex-shrink: 0;
 
-  @media screen and (max-width: $no-gap-breakpoint - 1px) {
+  @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
     border-right: 0;
     border-left: 0;
   }
@@ -8126,7 +8131,7 @@ noscript {
         }
 
         // Fallback for older browsers with no container queries support
-        @media screen and (max-width: 372px + 55px) {
+        @media screen and (max-width: (372px + 55px)) {
           display: none;
         }
       }
@@ -8595,7 +8600,7 @@ noscript {
     width: 124px;
     flex: 0 0 auto;
 
-    @media screen and (max-width: 124px + 300px) {
+    @media screen and (max-width: (124px + 300px)) {
       display: none;
     }
   }
@@ -8605,7 +8610,7 @@ noscript {
     flex: 0 0 auto;
     position: relative;
 
-    @media screen and (max-width: 124px + 300px) {
+    @media screen and (max-width: (124px + 300px)) {
       width: 100%;
     }
   }
@@ -8698,7 +8703,6 @@ noscript {
         height: 100%;
         min-width: auto;
         min-height: auto;
-        vertical-align: bottom;
         object-fit: contain;
       }
     }
@@ -8734,6 +8738,7 @@ noscript {
   }
 
   .emoji-picker-dropdown {
+    display: flex;
     margin: 2px;
   }
 
@@ -8959,7 +8964,7 @@ noscript {
 .layout-single-column .explore__search-header {
   display: none;
 
-  @media screen and (max-width: $no-gap-breakpoint - 1px) {
+  @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
     display: flex;
   }
 }
@@ -9357,7 +9362,7 @@ noscript {
     }
   }
 
-  @media screen and (max-width: $no-gap-breakpoint - 1px) {
+  @media screen and (max-width: ($no-gap-breakpoint - 1px)) {
     &__choices {
       flex-direction: column;
 
@@ -10902,6 +10907,7 @@ noscript {
     font-size: 14px;
     line-height: 20px;
     display: -webkit-box;
+    line-clamp: 2;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     max-height: 2 * 20px;