FIX: remove SCSS mixed declarations (#143)

This fixes the SCSS mixed declaration errors (most noticeable while
running rspec)

scss/box-view.scss

@@ -32,19 +32,19 @@
 }
 
 .experimental-screen {
-  @include breakpoint(tablet) {
-    display: none;
-  }
   max-width: unset !important;
-  @media screen and (max-width: 488px) {
-    display: none;
-  }
   width: 100%;
   display: block;
   margin: 0;
   padding: 0;
   position: relative;
   container: content-width / inline-size;
+  @media screen and (max-width: 488px) {
+    display: none;
+  }
+  @include breakpoint(tablet) {
+    display: none;
+  }
   li {
     list-style: none;
     margin: 0;
@@ -59,6 +59,12 @@
     height: var(--d-border-radius-large);
     background-color: var(--background-color);
     z-index: 399;
+    mask: radial-gradient(
+      circle at var(--d-border-radius-large) var(--d-border-radius-large),
+      transparent var(--d-border-radius-large),
+      transparent var(--d-border-radius-large),
+      black var(--d-border-radius-large)
+    );
     -webkit-mask: radial-gradient(
       circle at var(--d-border-radius-large) var(--d-border-radius-large),
       transparent var(--d-border-radius-large),

scss/desktop-horizon-fixes.scss

@@ -51,13 +51,12 @@
   .bulk-select-topics {
     position: absolute;
     right: -1em;
-    @media screen and (max-width: 1048px) {
-      right: 0;
-    }
-
     background: var(--secondary);
     border-radius: 0 0 0 var(--d-border-radius);
     padding: 1em;
+    @media screen and (max-width: 1048px) {
+      right: 0;
+    }
     button {
       white-space: nowrap;
     }

scss/main.scss

@@ -65,6 +65,11 @@ body:not(.has-full-page-chat) {
       width: 100%;
       max-width: unset;
       padding-bottom: var(--spacing-block-l);
+      border-radius: var(--d-border-radius-large);
+      background-color: var(--d-content-background);
+      @include breakpoint(medium) {
+        border-radius: 0px;
+      }
       html.composer-open & {
         padding-bottom: var(--composer-height);
       }
@@ -76,11 +81,6 @@ body:not(.has-full-page-chat) {
           padding-inline: var(--spacing-inline-l);
         }
       }
-      border-radius: var(--d-border-radius-large);
-      @include breakpoint(medium) {
-        border-radius: 0px;
-      }
-      background-color: var(--d-content-background);
     }
   }
 }

scss/topic-cards.scss

@@ -174,14 +174,6 @@
     position: relative;
   }
   .topic-status-card {
-    @include breakpoint("large", min-width) {
-      position: absolute;
-      right: 0px;
-      top: -20px;
-      background-color: var(--d-content-background);
-      height: 20px;
-      font-size: var(--font-down-3);
-    }
     height: min-content;
     margin-left: auto;
     display: flex;
@@ -195,6 +187,14 @@
     border: 1px solid var(--status-color);
     color: var(--status-color);
     width: min-content;
+    @include breakpoint("large", min-width) {
+      position: absolute;
+      right: 0px;
+      top: -20px;
+      background-color: var(--d-content-background);
+      height: 20px;
+      font-size: var(--font-down-3);
+    }
     svg {
       font-size: var(--font-down-1);
       color: var(--status-color);
@@ -384,9 +384,6 @@
   //card with excerpt (all in horizon since the toggle is gone)
   &.excerpt-expanded {
     grid-template-columns: 20px min-content auto minmax(0, 100px);
-    @include breakpoint(extra-large, $rule: min-width) {
-      grid-template-columns: 20px min-content auto min-content;
-    }
     grid-template-areas:
       ". . .  dropdown"
       "avatar update metadata metadata"
@@ -399,6 +396,10 @@
       max-width: 100%;
     }
 
+    @include breakpoint(extra-large, $rule: min-width) {
+      grid-template-columns: 20px min-content auto min-content;
+    }
+
     @include breakpoint(mobile-extra-large) {
       grid-template-columns: auto min-content;
       grid-template-areas:
@@ -599,6 +600,9 @@ body.user-messages-page {
 // Bulk select
 
 .bulk-select-enabled .topic-list-body .topic-list-item {
+  grid-template-areas:
+    "bulk-select . . . status"
+    "bulk-select activity activity . category";
   td.topic-likes-replies-data {
     display: none;
   }
@@ -622,9 +626,6 @@ body.user-messages-page {
         "bulk-select activity activity . . .";
     }
   }
-  grid-template-areas:
-    "bulk-select . . . status"
-    "bulk-select activity activity . category";
   .bulk-select {
     grid-area: bulk-select;
     padding: 0;

scss/topic.scss

@@ -45,8 +45,6 @@
 //should probably get rid of this extra specificity class in core?
 .timeline-container.timeline-fullscreen {
   @include breakpoint("medium", $rule: max-width) {
-    .topic-timeline .timeline-scrollarea-wrapper {
-    }
     .topic-timeline
       .timeline-scrollarea
       .timeline-scroller