From 1365cbff3a9707626b7bd9b6f88d748bc4860efa Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 2 Apr 2023 15:18:08 +0800
Subject: [PATCH] Fix menu bar not placed properly on Firefox

Because Firefox *still* doesn't support :has
---
 src/app.css                  | 2 +-
 src/app.jsx                  | 8 ++++++++
 src/components/shortcuts.css | 6 +++---
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app.css b/src/app.css
index f3ace029..2ea9fe41 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1062,7 +1062,7 @@ body:has(.status-deck) .media-post-link {
   filter: drop-shadow(0 1px 2px var(--button-bg-color));
 }
 @media (max-width: calc(40em - 1px)) {
-  #app:has(#shortcuts .tab-bar) #compose-button {
+  #app[data-shortcuts-view-mode='tab-menu-bar'] #compose-button {
     bottom: calc(16px + 52px);
     bottom: calc(16px + env(safe-area-inset-bottom) + 52px);
   }
diff --git a/src/app.jsx b/src/app.jsx
index a94a9e76..8e4001aa 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -192,6 +192,14 @@ function App() {
     return !/^\/(login|welcome)/.test(pathname);
   }, [location]);
 
+  // Change #app classname based on snapStates.settings.shortcutsViewMode
+  useEffect(() => {
+    const $app = document.getElementById('app');
+    if ($app) {
+      $app.dataset.shortcutsViewMode = snapStates.settings.shortcutsViewMode;
+    }
+  }, [snapStates.settings.shortcutsViewMode]);
+
   return (
     <>
       <Routes location={nonRootLocation || location}>
diff --git a/src/components/shortcuts.css b/src/components/shortcuts.css
index 1c1040cf..3e14f895 100644
--- a/src/components/shortcuts.css
+++ b/src/components/shortcuts.css
@@ -131,16 +131,16 @@ shortcuts .tab-bar[hidden] {
 }
 
 @media (max-width: calc(40em - 1px)) {
-  #app:has(#shortcuts .tab-bar) .deck-container {
+  #app[data-shortcuts-view-mode='tab-menu-bar'] .deck-container {
     padding-bottom: 52px;
   }
 }
 
 @media (min-width: 40em) {
-  #app:has(#shortcuts .tab-bar) .timeline-deck {
+  #app[data-shortcuts-view-mode='tab-menu-bar'] .timeline-deck {
     margin-top: 44px;
   }
-  #app:has(#shortcuts .tab-bar) .timeline-deck > header {
+  #app[data-shortcuts-view-mode='tab-menu-bar'] .timeline-deck > header {
     --margin-top: calc(44px + 8px);
   }
   #shortcuts .tab-bar:not([hidden]) {