From 8ea43c0fdbfc4a7712a7c786ab868f9f72cc93fe Mon Sep 17 00:00:00 2001
From: nileane <nileane@users.noreply.github.com>
Date: Tue, 1 Oct 2024 14:21:21 +0000
Subject: [PATCH] Copy CSS files to installation folder

---
 .../tangerineui-cherry.scss                   | 101 ++++++------------
 .../tangerineui-lagoon.scss                   | 101 ++++++------------
 .../tangerineui-purple.scss                   | 101 ++++++------------
 .../styles/tangerineui/tangerineui.scss       | 101 ++++++------------
 4 files changed, 136 insertions(+), 268 deletions(-)

diff --git a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss
index 1d7dc23..03031ae 100644
--- a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss
+++ b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss
@@ -2357,7 +2357,7 @@ body.app-body  {
     color: var(--color-content-fg);
     display: flex;
     position: absolute;
-    inset-inline-end: 23px;
+    inset-inline-end: 20px;
     z-index: 1;
 }
 .app-body .status__relative-time > * {
@@ -3649,9 +3649,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 
 .app-body .column-header__collapsible {
-    background-color: color-mix(in srgb, var(--color-content-secondary-bg), transparent 15%);
-    -webkit-backdrop-filter: blur(15px);
-    backdrop-filter: blur(15px);
+    background-color: var(--color-content-secondary-bg);
     border-left: 1px solid var(--color-lines);
     border-right: 1px solid var(--color-lines);
     border-bottom: 0;
@@ -3797,11 +3795,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
             }
         }
     }
-    .app-body:not(.layout-multiple-columns) .column-header__collapsible { /* Remove margin between column settings and column header */
+    .app-body:not(.layout-multiple-columns) .column-header__collapsible {
         margin-top: 1px;
         position: fixed;
-        left: 0;
-        right: 0;
+        left: -45px;
+        right: -55px;
     }
     .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) {
         border-bottom: 1px solid var(--color-lines);
@@ -3974,11 +3972,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     display: flex;
     flex-flow: column;
 }
-@media screen and (max-width:1174px) {
-    .app-body .navigation-panel__menu {
-        flex-flow: row;
-    }
-}
 .app-body .column-link--transparent {
     color: var(--color-fg);
 }
@@ -4131,33 +4124,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         backdrop-filter: blur(20px);
     }
     .app-body .navigation-panel__menu {
-        padding-right: 20vw;
-    }
-    .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner::before {
-        content: " ";
-        position: fixed;
-        right: 0;
-        bottom: 0;
-        width: 17vw;
-        height: calc(4.2em + var(--safe-area-bottom) - 1px);
-        background-image: linear-gradient(to right, transparent, var(--color-content-bg) 75.63%);
-        background-color: transparent;
-        z-index: 2;
-    }
-    .app-body .columns-area__panels__pane--navigational .navigation-panel::after {
-        content: " ";
-    }
-    .app-body .navigation-panel:has(> *:nth-child(4):last-child)::after,
-    .app-body .navigation-panel:has(> *:nth-child(5):last-child)::after,
-    .app-body .navigation-panel:has(> *:nth-child(6):last-child)::after,
-    .app-body .navigation-panel:has(> *:nth-child(4):last-child)::before,
-    .app-body .navigation-panel:has(> *:nth-child(5):last-child)::before,
-    .app-body .navigation-panel:has(> *:nth-child(6):last-child)::before {
-        display: none;
+        flex-flow: row;
+        overflow-x: auto;
+        mask-image: linear-gradient(90deg, black 80%, transparent 96%);
     }
     .app-body .navigation-panel :is(.column-link, .navigation-panel__legal),
-    .app-body .column-link--transparent:is(.active, .active:hover, :active),
-    .app-body .columns-area__panels__pane--navigational .navigation-panel::after {
+    .app-body .navigation-panel .column-link:is(.active, .active:hover, :active),
+    .app-body .navigation-panel .navigation-panel__menu::after {
         flex: 0 0 17vw;
         margin: 6px 0 8px;
         padding: 4px 0 3px;
@@ -4169,41 +4142,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         box-sizing: border-box;
         background-color: transparent;
         transform-origin: center;
-        transition: .2s transform;
+        transition: .3s transform;
     }
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(4):last-child)
-        :is(.column-link, .navigation-panel__legal) {
+    .app-body .navigation-panel .navigation-panel__menu::after {
+        content: " ";
+    }
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3)),
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4)),
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5)),
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6)) {
+        mask-image: none;
+    }
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3) ~ *,
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(4),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(4) ~ *,
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(5),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(5) ~ *,
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6) ~ * {
         flex: 50vw;
     }
-    .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active {
-        transform: scale(.8);
-    }
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(5):last-child)
-        :is(.column-link, .navigation-panel__legal),
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(7):last-child):has(.getting-started__trends)
-        :is(.column-link, .navigation-panel__legal)  {
-        flex: calc(100vw / 3);
-    }
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(6):last-child)
-        :is(.column-link, .navigation-panel__legal) {
-        flex: 25vw;
-    }
-    .app-body
-        .navigation-panel:has(> *:nth-child(7):last-child):has(.getting-started__trends)::after {
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::after,
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::after,
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::after,
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6))::after {
         display: none;
     }
-    .app-body .column-link--transparent:is(.active, .active:hover, :active) {
-        margin: 6px 0 8px;
-        padding: 4px 0 3px;
-        border-radius: 8px;
-        border: 0;
-    }
-    .app-body .column-link--transparent.active {
-        animation: bounce-sml .3s 1;
+    .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active {
+        transform: scale(.85);
     }
     .app-body .column-link__icon {
         margin: 0;
diff --git a/mastodon/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss b/mastodon/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss
index 8244e58..907d685 100644
--- a/mastodon/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss
+++ b/mastodon/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss
@@ -2357,7 +2357,7 @@ body.app-body  {
     color: var(--color-content-fg);
     display: flex;
     position: absolute;
-    inset-inline-end: 23px;
+    inset-inline-end: 20px;
     z-index: 1;
 }
 .app-body .status__relative-time > * {
@@ -3649,9 +3649,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 
 .app-body .column-header__collapsible {
-    background-color: color-mix(in srgb, var(--color-content-secondary-bg), transparent 15%);
-    -webkit-backdrop-filter: blur(15px);
-    backdrop-filter: blur(15px);
+    background-color: var(--color-content-secondary-bg);
     border-left: 1px solid var(--color-lines);
     border-right: 1px solid var(--color-lines);
     border-bottom: 0;
@@ -3797,11 +3795,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
             }
         }
     }
-    .app-body:not(.layout-multiple-columns) .column-header__collapsible { /* Remove margin between column settings and column header */
+    .app-body:not(.layout-multiple-columns) .column-header__collapsible {
         margin-top: 1px;
         position: fixed;
-        left: 0;
-        right: 0;
+        left: -45px;
+        right: -55px;
     }
     .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) {
         border-bottom: 1px solid var(--color-lines);
@@ -3974,11 +3972,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     display: flex;
     flex-flow: column;
 }
-@media screen and (max-width:1174px) {
-    .app-body .navigation-panel__menu {
-        flex-flow: row;
-    }
-}
 .app-body .column-link--transparent {
     color: var(--color-fg);
 }
@@ -4131,33 +4124,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         backdrop-filter: blur(20px);
     }
     .app-body .navigation-panel__menu {
-        padding-right: 20vw;
-    }
-    .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner::before {
-        content: " ";
-        position: fixed;
-        right: 0;
-        bottom: 0;
-        width: 17vw;
-        height: calc(4.2em + var(--safe-area-bottom) - 1px);
-        background-image: linear-gradient(to right, transparent, var(--color-content-bg) 75.63%);
-        background-color: transparent;
-        z-index: 2;
-    }
-    .app-body .columns-area__panels__pane--navigational .navigation-panel::after {
-        content: " ";
-    }
-    .app-body .navigation-panel:has(> *:nth-child(4):last-child)::after,
-    .app-body .navigation-panel:has(> *:nth-child(5):last-child)::after,
-    .app-body .navigation-panel:has(> *:nth-child(6):last-child)::after,
-    .app-body .navigation-panel:has(> *:nth-child(4):last-child)::before,
-    .app-body .navigation-panel:has(> *:nth-child(5):last-child)::before,
-    .app-body .navigation-panel:has(> *:nth-child(6):last-child)::before {
-        display: none;
+        flex-flow: row;
+        overflow-x: auto;
+        mask-image: linear-gradient(90deg, black 80%, transparent 96%);
     }
     .app-body .navigation-panel :is(.column-link, .navigation-panel__legal),
-    .app-body .column-link--transparent:is(.active, .active:hover, :active),
-    .app-body .columns-area__panels__pane--navigational .navigation-panel::after {
+    .app-body .navigation-panel .column-link:is(.active, .active:hover, :active),
+    .app-body .navigation-panel .navigation-panel__menu::after {
         flex: 0 0 17vw;
         margin: 6px 0 8px;
         padding: 4px 0 3px;
@@ -4169,41 +4142,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         box-sizing: border-box;
         background-color: transparent;
         transform-origin: center;
-        transition: .2s transform;
+        transition: .3s transform;
     }
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(4):last-child)
-        :is(.column-link, .navigation-panel__legal) {
+    .app-body .navigation-panel .navigation-panel__menu::after {
+        content: " ";
+    }
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3)),
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4)),
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5)),
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6)) {
+        mask-image: none;
+    }
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3) ~ *,
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(4),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(4) ~ *,
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(5),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(5) ~ *,
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6) ~ * {
         flex: 50vw;
     }
-    .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active {
-        transform: scale(.8);
-    }
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(5):last-child)
-        :is(.column-link, .navigation-panel__legal),
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(7):last-child):has(.getting-started__trends)
-        :is(.column-link, .navigation-panel__legal)  {
-        flex: calc(100vw / 3);
-    }
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(6):last-child)
-        :is(.column-link, .navigation-panel__legal) {
-        flex: 25vw;
-    }
-    .app-body
-        .navigation-panel:has(> *:nth-child(7):last-child):has(.getting-started__trends)::after {
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::after,
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::after,
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::after,
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6))::after {
         display: none;
     }
-    .app-body .column-link--transparent:is(.active, .active:hover, :active) {
-        margin: 6px 0 8px;
-        padding: 4px 0 3px;
-        border-radius: 8px;
-        border: 0;
-    }
-    .app-body .column-link--transparent.active {
-        animation: bounce-sml .3s 1;
+    .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active {
+        transform: scale(.85);
     }
     .app-body .column-link__icon {
         margin: 0;
diff --git a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss
index ce6beee..1a195e6 100644
--- a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss
+++ b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss
@@ -2357,7 +2357,7 @@ body.app-body  {
     color: var(--color-content-fg);
     display: flex;
     position: absolute;
-    inset-inline-end: 23px;
+    inset-inline-end: 20px;
     z-index: 1;
 }
 .app-body .status__relative-time > * {
@@ -3649,9 +3649,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 
 .app-body .column-header__collapsible {
-    background-color: color-mix(in srgb, var(--color-content-secondary-bg), transparent 15%);
-    -webkit-backdrop-filter: blur(15px);
-    backdrop-filter: blur(15px);
+    background-color: var(--color-content-secondary-bg);
     border-left: 1px solid var(--color-lines);
     border-right: 1px solid var(--color-lines);
     border-bottom: 0;
@@ -3797,11 +3795,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
             }
         }
     }
-    .app-body:not(.layout-multiple-columns) .column-header__collapsible { /* Remove margin between column settings and column header */
+    .app-body:not(.layout-multiple-columns) .column-header__collapsible {
         margin-top: 1px;
         position: fixed;
-        left: 0;
-        right: 0;
+        left: -45px;
+        right: -55px;
     }
     .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) {
         border-bottom: 1px solid var(--color-lines);
@@ -3974,11 +3972,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     display: flex;
     flex-flow: column;
 }
-@media screen and (max-width:1174px) {
-    .app-body .navigation-panel__menu {
-        flex-flow: row;
-    }
-}
 .app-body .column-link--transparent {
     color: var(--color-fg);
 }
@@ -4131,33 +4124,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         backdrop-filter: blur(20px);
     }
     .app-body .navigation-panel__menu {
-        padding-right: 20vw;
-    }
-    .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner::before {
-        content: " ";
-        position: fixed;
-        right: 0;
-        bottom: 0;
-        width: 17vw;
-        height: calc(4.2em + var(--safe-area-bottom) - 1px);
-        background-image: linear-gradient(to right, transparent, var(--color-content-bg) 75.63%);
-        background-color: transparent;
-        z-index: 2;
-    }
-    .app-body .columns-area__panels__pane--navigational .navigation-panel::after {
-        content: " ";
-    }
-    .app-body .navigation-panel:has(> *:nth-child(4):last-child)::after,
-    .app-body .navigation-panel:has(> *:nth-child(5):last-child)::after,
-    .app-body .navigation-panel:has(> *:nth-child(6):last-child)::after,
-    .app-body .navigation-panel:has(> *:nth-child(4):last-child)::before,
-    .app-body .navigation-panel:has(> *:nth-child(5):last-child)::before,
-    .app-body .navigation-panel:has(> *:nth-child(6):last-child)::before {
-        display: none;
+        flex-flow: row;
+        overflow-x: auto;
+        mask-image: linear-gradient(90deg, black 80%, transparent 96%);
     }
     .app-body .navigation-panel :is(.column-link, .navigation-panel__legal),
-    .app-body .column-link--transparent:is(.active, .active:hover, :active),
-    .app-body .columns-area__panels__pane--navigational .navigation-panel::after {
+    .app-body .navigation-panel .column-link:is(.active, .active:hover, :active),
+    .app-body .navigation-panel .navigation-panel__menu::after {
         flex: 0 0 17vw;
         margin: 6px 0 8px;
         padding: 4px 0 3px;
@@ -4169,41 +4142,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         box-sizing: border-box;
         background-color: transparent;
         transform-origin: center;
-        transition: .2s transform;
+        transition: .3s transform;
     }
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(4):last-child)
-        :is(.column-link, .navigation-panel__legal) {
+    .app-body .navigation-panel .navigation-panel__menu::after {
+        content: " ";
+    }
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3)),
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4)),
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5)),
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6)) {
+        mask-image: none;
+    }
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3) ~ *,
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(4),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(4) ~ *,
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(5),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(5) ~ *,
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6) ~ * {
         flex: 50vw;
     }
-    .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active {
-        transform: scale(.8);
-    }
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(5):last-child)
-        :is(.column-link, .navigation-panel__legal),
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(7):last-child):has(.getting-started__trends)
-        :is(.column-link, .navigation-panel__legal)  {
-        flex: calc(100vw / 3);
-    }
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(6):last-child)
-        :is(.column-link, .navigation-panel__legal) {
-        flex: 25vw;
-    }
-    .app-body
-        .navigation-panel:has(> *:nth-child(7):last-child):has(.getting-started__trends)::after {
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::after,
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::after,
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::after,
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6))::after {
         display: none;
     }
-    .app-body .column-link--transparent:is(.active, .active:hover, :active) {
-        margin: 6px 0 8px;
-        padding: 4px 0 3px;
-        border-radius: 8px;
-        border: 0;
-    }
-    .app-body .column-link--transparent.active {
-        animation: bounce-sml .3s 1;
+    .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active {
+        transform: scale(.85);
     }
     .app-body .column-link__icon {
         margin: 0;
diff --git a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss
index 079ee37..08ae49e 100644
--- a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss
+++ b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss
@@ -2357,7 +2357,7 @@ body.app-body  {
     color: var(--color-content-fg);
     display: flex;
     position: absolute;
-    inset-inline-end: 23px;
+    inset-inline-end: 20px;
     z-index: 1;
 }
 .app-body .status__relative-time > * {
@@ -3649,9 +3649,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 
 .app-body .column-header__collapsible {
-    background-color: color-mix(in srgb, var(--color-content-secondary-bg), transparent 15%);
-    -webkit-backdrop-filter: blur(15px);
-    backdrop-filter: blur(15px);
+    background-color: var(--color-content-secondary-bg);
     border-left: 1px solid var(--color-lines);
     border-right: 1px solid var(--color-lines);
     border-bottom: 0;
@@ -3797,11 +3795,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
             }
         }
     }
-    .app-body:not(.layout-multiple-columns) .column-header__collapsible { /* Remove margin between column settings and column header */
+    .app-body:not(.layout-multiple-columns) .column-header__collapsible {
         margin-top: 1px;
         position: fixed;
-        left: 0;
-        right: 0;
+        left: -45px;
+        right: -55px;
     }
     .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) {
         border-bottom: 1px solid var(--color-lines);
@@ -3974,11 +3972,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     display: flex;
     flex-flow: column;
 }
-@media screen and (max-width:1174px) {
-    .app-body .navigation-panel__menu {
-        flex-flow: row;
-    }
-}
 .app-body .column-link--transparent {
     color: var(--color-fg);
 }
@@ -4131,33 +4124,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         backdrop-filter: blur(20px);
     }
     .app-body .navigation-panel__menu {
-        padding-right: 20vw;
-    }
-    .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner::before {
-        content: " ";
-        position: fixed;
-        right: 0;
-        bottom: 0;
-        width: 17vw;
-        height: calc(4.2em + var(--safe-area-bottom) - 1px);
-        background-image: linear-gradient(to right, transparent, var(--color-content-bg) 75.63%);
-        background-color: transparent;
-        z-index: 2;
-    }
-    .app-body .columns-area__panels__pane--navigational .navigation-panel::after {
-        content: " ";
-    }
-    .app-body .navigation-panel:has(> *:nth-child(4):last-child)::after,
-    .app-body .navigation-panel:has(> *:nth-child(5):last-child)::after,
-    .app-body .navigation-panel:has(> *:nth-child(6):last-child)::after,
-    .app-body .navigation-panel:has(> *:nth-child(4):last-child)::before,
-    .app-body .navigation-panel:has(> *:nth-child(5):last-child)::before,
-    .app-body .navigation-panel:has(> *:nth-child(6):last-child)::before {
-        display: none;
+        flex-flow: row;
+        overflow-x: auto;
+        mask-image: linear-gradient(90deg, black 80%, transparent 96%);
     }
     .app-body .navigation-panel :is(.column-link, .navigation-panel__legal),
-    .app-body .column-link--transparent:is(.active, .active:hover, :active),
-    .app-body .columns-area__panels__pane--navigational .navigation-panel::after {
+    .app-body .navigation-panel .column-link:is(.active, .active:hover, :active),
+    .app-body .navigation-panel .navigation-panel__menu::after {
         flex: 0 0 17vw;
         margin: 6px 0 8px;
         padding: 4px 0 3px;
@@ -4169,41 +4142,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         box-sizing: border-box;
         background-color: transparent;
         transform-origin: center;
-        transition: .2s transform;
+        transition: .3s transform;
     }
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(4):last-child)
-        :is(.column-link, .navigation-panel__legal) {
+    .app-body .navigation-panel .navigation-panel__menu::after {
+        content: " ";
+    }
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3)),
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4)),
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5)),
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6)) {
+        mask-image: none;
+    }
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(3) ~ *,
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(4),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(4) ~ *,
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(5),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(5) ~ *,
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6),
+    .app-body .navigation-panel__menu .column-link:first-child:nth-last-child(6) ~ * {
         flex: 50vw;
     }
-    .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active {
-        transform: scale(.8);
-    }
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(5):last-child)
-        :is(.column-link, .navigation-panel__legal),
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(7):last-child):has(.getting-started__trends)
-        :is(.column-link, .navigation-panel__legal)  {
-        flex: calc(100vw / 3);
-    }
-    .app-body
-        .navigation-panel__menu:has(> *:nth-child(6):last-child)
-        :is(.column-link, .navigation-panel__legal) {
-        flex: 25vw;
-    }
-    .app-body
-        .navigation-panel:has(> *:nth-child(7):last-child):has(.getting-started__trends)::after {
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(3))::after,
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(4))::after,
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(5))::after,
+    .app-body .navigation-panel__menu:has(.column-link:first-child:nth-last-child(6))::after {
         display: none;
     }
-    .app-body .column-link--transparent:is(.active, .active:hover, :active) {
-        margin: 6px 0 8px;
-        padding: 4px 0 3px;
-        border-radius: 8px;
-        border: 0;
-    }
-    .app-body .column-link--transparent.active {
-        animation: bounce-sml .3s 1;
+    .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active {
+        transform: scale(.85);
     }
     .app-body .column-link__icon {
         margin: 0;