responsiveness improvements

+ extract track context menu handler into a composable

src/assets/scss/Global/app-grid.scss

@@ -1,6 +1,6 @@
 #app-grid {
   display: grid;
-  grid-template-columns: min-content 1fr min-content;
+  grid-template-columns: min-content 1fr 29rem;
   grid-template-rows: max-content 1fr max-content;
   grid-template-areas:
     "l-sidebar nav search-input"
@@ -12,6 +12,20 @@
   margin: 0 auto;
   gap: 1rem;
   margin: $small auto;
+
+  @include for-desktop-down {
+    grid-template-columns: min-content 1fr 26rem;
+  }
+
+  @include tablet-landscape {
+    grid-template-columns: min-content 1fr;
+
+    .r-sidebar,
+    #tabs,
+    #gsearch-input {
+      display: none;
+    }
+  }
 }
 
 #acontent {
@@ -30,16 +44,11 @@
   grid-area: tabs;
   height: 3.5rem;
   margin-top: -$small;
-
-  @include tablet-landscape {
-    display: none;
-  }
 }
 
 .r-sidebar {
   grid-area: r-sidebar;
   margin-top: -$small;
-  width: 29rem;
 }
 
 #gsearch-input {

src/assets/scss/_mixins.scss

@@ -0,0 +1,34 @@
+@mixin ximage {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+// media query mixins
+@mixin phone-only {
+  @media (max-width: 599px) {
+    @content;
+  }
+}
+@mixin tablet-portrait {
+  @media (max-width: 810) {
+    @content;
+  }
+}
+
+@mixin tablet-landscape {
+  @media (max-width: 1080px) {
+    @content;
+  }
+}
+@mixin for-desktop-down {
+  @media (max-width: 1600px) {
+    @content;
+  }
+}
+
+@mixin for-big-desktop-up {
+  @media (min-width: 1800px) {
+    @content;
+  }
+}

src/assets/scss/_variables.scss

@@ -44,36 +44,11 @@ $secondary: $gray5;
 $cta: $blue;
 $danger: $red;
 $track-hover: $gray4;
-$context: $gray5;
+$context: $gray;
 
 // SVG COLORS
 $default: $accent;
 $track-btn-svg: $red;
 $side-nav-svg: $red;
 
-// media query mixins
-@mixin phone-only {
-  @media (max-width: 599px) {
-    @content;
-  }
-}
-@mixin tablet-portrait {
-  @media (max-width: 900px) {
-    @content;
-  }
-}
-@mixin tablet-landscape {
-  @media (max-width: 1200px) {
-    @content;
-  }
-}
-@mixin for-desktop-down {
-  @media (max-width: 1280px) {
-    @content;
-  }
-}
-@mixin for-big-desktop-up {
-  @media (min-width: 1800px) {
-    @content;
-  }
-}
+

src/assets/scss/mixins.scss

@@ -1,5 +0,0 @@
-@mixin ximage {
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-}