Adjust help/dark mode toggle positioning

Make sure the dark mode toggle and help button scroll out of view instead of being fixed. This prevents annoying overlap at certain screen widths.
danrahn · Jan 15, 2024 · 19f6673 · 19f6673
1 parent 94112a5
commit 19f6673
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/Client/Style/style.css b/Client/Style/style.css
@@ -430,9 +430,15 @@ input:focus-visible {
   border-color:var(--theme-focus-color);
 }
 
+#topRightControls {
+  position: relative;
+  top: 30px;
+}
+
 #helpContainer {
   position: absolute;
-  top: 30px;
+  top: 0;
+  right: 0;
 }
 
 #helpBtn {
@@ -446,8 +452,7 @@ input:focus-visible {
 
 #toggleContainer {
   position: absolute;
-  top: 30px;
-  right: 60px;
+  right: 30px;
 }
 
 #darkModeToggle {
@@ -713,7 +718,7 @@ input:focus-visible {
     height: 10px;
   }
 
-  #helpContainer {
+  #topRightControls {
     right: 30px;
   }
 }
@@ -733,7 +738,7 @@ input:focus-visible {
 
   /* The help button runs into the same issues as the theme toggle.
   * We don't want to hide it though, so just adjust its right margin to give it more room. */
-  #helpContainer {
+  #topRightControls {
     right: 10px;
   }
 }
diff --git a/index.html b/index.html
@@ -16,14 +16,16 @@
 <body>
 
 <div id="plexFrame">
-    <div id="helpContainer" title="Show Help" tabindex="0">
-        <svg id="helpBtn"></svg>
-    </div>
-    <div id="toggleContainer" title="Toggle Dark Mode" tabindex="0">
-        <label id="darkModeToggle" for="darkModeCheckbox">
-            <input type="checkbox" name="darkModeCheckbox" id="darkModeCheckbox" title="Toggle Dark Mode">
-            <span class="toggle"></span>
-        </label>
+    <div id="topRightControls">
+        <div id="helpContainer" title="Show Help" tabindex="0">
+            <svg id="helpBtn"></svg>
+        </div>
+        <div id="toggleContainer" title="Toggle Dark Mode" tabindex="0">
+            <label id="darkModeToggle" for="darkModeCheckbox">
+                <input type="checkbox" name="darkModeCheckbox" id="darkModeCheckbox" title="Toggle Dark Mode">
+                <span class="toggle"></span>
+            </label>
+        </div>
     </div>
     <div id="intro">
         <h1 id="siteTitle">Marker Editor <i id="settings" class="hidden" title="Settings" tabIndex="0"><svg></svg></i></h1>