From 0abac3bbc31c55bf934ce867d87e932c64833ebf Mon Sep 17 00:00:00 2001
From: Caryl Wyatt <carylw@hathitrust.org>
Date: Mon, 23 Feb 2026 16:56:20 -0500
Subject: [PATCH] fix small screen 'options' button and sidebar focus issues

---
 pt/web/firebird/src/js/App.svelte    | 22 ++++++++++++++++++----
 pt/web/firebird/src/scss/styles.scss |  2 +-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/pt/web/firebird/src/js/App.svelte b/pt/web/firebird/src/js/App.svelte
index c1eb4b359..60475d872 100644
--- a/pt/web/firebird/src/js/App.svelte
+++ b/pt/web/firebird/src/js/App.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount, setContext } from 'svelte';
   import { writable, get } from 'svelte/store';
+  import {MediaQuery} from 'svelte/reactivity'
   import { consent } from '~firebird-common/src/js/lib/store.svelte.js';
 
   import dialogPolyfill from 'dialog-polyfill';
@@ -113,6 +114,8 @@
   window.manifest = manifest;
   window.emitter = emitter;
 
+  const largeScreen = new MediaQuery('min-width: 768px');
+
   // aside
   let priority = 'min';
   let disabled = false;
@@ -200,7 +203,7 @@
   let optionsToggled = false;
   function toggleOptions() {
     optionsToggled = !optionsToggled;
-    document.body.dataset.optionsToggled = optionsToggled;
+    document.body.dataset.optionsToggled = optionsToggled.toString();
   }
 
   let lightboxModal;
@@ -430,10 +433,12 @@
 <div style="grid-area: options">
   <button
     data-action="toggle-options"
+    id="toggle-options"
     style="grid-area: options"
     class="btn btn-dark shadow rounded-0 w-100 d-flex justify-content-between align-items-center d-md-none"
     class:d-none={$interfaceMode == 'minimal'}
     on:click={toggleOptions}
+    aria-expanded={optionsToggled}
   >
     <span>Options</span>
     <i class="fa-solid fa-angle-down" class:fa-rotate-180={optionsToggled} aria-hidden="true"></i>
@@ -442,8 +447,8 @@
 {#if isReaderView}
   <ViewerToolbar />
 {/if}
-<aside>
-  <div class="inner" class:invisible={!asideExpanded || $interfaceMode == 'minimal'}>
+<aside class:invisible={$interfaceMode == 'minimal' || (largeScreen.current && !asideExpanded) || (!largeScreen.current && !optionsToggled)}>
+  <div class="inner" >
     <div class="accordion">
       <SurveyPanel />
     </div>
@@ -509,7 +514,7 @@
   </div>
 </dialog>
 
-<style>
+<style lang="scss">
   .mousecatcher {
     position: absolute;
     left: 0;
@@ -534,4 +539,13 @@
   .lightbox::backdrop {
     background: rgba(0, 0, 0, 0.5);
   }
+  button#toggle-options {
+    border: 3px solid #0f1010 !important;
+    &:hover {
+      border: 3px solid #333434 !important;
+    }
+    &:focus-visible {
+      border: 3px solid #086ab4 !important;
+    }
+  }
 </style>
diff --git a/pt/web/firebird/src/scss/styles.scss b/pt/web/firebird/src/scss/styles.scss
index 050f5273c..238b9f509 100644
--- a/pt/web/firebird/src/scss/styles.scss
+++ b/pt/web/firebird/src/scss/styles.scss
@@ -74,7 +74,7 @@ html[data-activated] .apps {
 
     background-color: #fff;
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
       grid-template-areas:
         'header header'
         'banner banner'