feat: add mobile-only settings button to header for improved accessibility

Author: medyo

src/assets/App.css

@@ -1517,3 +1517,12 @@ Modal
     width: auto;
   }
 }
+
+.mobileOnly {
+  display: none;
+}
+@media (max-width: 768px) {
+  .mobileOnly {
+    display: block;
+  }
+}

src/components/Layout/Header.tsx

@@ -67,6 +67,11 @@ export const Header = () => {
           <Changelog />
         </span>
         <SearchBar />
+        <div className="buttonsFlex extras mobileOnly">
+          <CircleButton onClick={onSettingsClick}>
+            <BsFillGearFill />
+          </CircleButton>
+        </div>
         <div className="buttonsFlex extras">
           {isDNDModeActive() && (
             <Button onClick={onUnpauseClicked} className="dndButton">