From 0ae8cf63d72769272b8ebc66327327809fb50ff2 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 6 May 2026 12:49:55 -0400
Subject: [PATCH] Improve Jitsi iframe toggle contrast

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../CLIENT__IDAA_and_customized_mods.md       |  4 ++++
 .../idaa/(idaa)/jitsi_reports/+page.svelte    | 24 +++++++++++--------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/documentation/CLIENT__IDAA_and_customized_mods.md b/documentation/CLIENT__IDAA_and_customized_mods.md
index 611647b3..73157778 100644
--- a/documentation/CLIENT__IDAA_and_customized_mods.md
+++ b/documentation/CLIENT__IDAA_and_customized_mods.md
@@ -657,6 +657,10 @@ https://assets-staging.noviams.com/novi-core-assets/css/c/idaa/idaa.css  — Boo
 - `<section>` and heading elements may get unexpected margins/padding from Bootstrap's typography reset
 - Class names `.field-input` and `.field-label` (used in the v2 edit form's scoped `<style>` block)
   also exist in `idaa.css`'s date picker — Svelte's scoped attribute selector wins, but be aware
+- In iframe widths near Tailwind `sm`, avoid hiding critical button labels behind breakpoint classes
+  and do not depend on color-only active states; Bootstrap's `.active`/button styling can make the
+  selected state nearly invisible unless the control uses an obvious fill/ring change plus
+  `aria-pressed`
 
 **Mitigation:** The iframe CSS conflicts existed before v2 and are not new. The v2 form uses the
 same Skeleton/Tailwind component classes as the rest of the app. Avoid using bare `<section>`,
diff --git a/src/routes/idaa/(idaa)/jitsi_reports/+page.svelte b/src/routes/idaa/(idaa)/jitsi_reports/+page.svelte
index a7deb710..b1553caf 100644
--- a/src/routes/idaa/(idaa)/jitsi_reports/+page.svelte
+++ b/src/routes/idaa/(idaa)/jitsi_reports/+page.svelte
@@ -430,26 +430,28 @@ function export_json() {
         </h1>
         <div class="flex items-center gap-2">
             <!-- View mode toggle -->
-            <div class="border-surface-200-800 flex overflow-hidden rounded-lg border text-sm">
+            <div class="border-surface-200-800 flex overflow-hidden rounded-lg border bg-surface-50-950 p-0.5 text-sm shadow-sm">
                 <button
                     type="button"
                     onclick={() => (group_by_room = true)}
                     title="Group sessions by room"
-                    class="flex items-center gap-1.5 px-3 py-1.5 font-medium transition-colors duration-150 {group_by_room
-                        ? 'preset-filled-primary'
-                        : 'opacity-60 hover:opacity-90 hover:bg-surface-100-900'}">
+                    aria-pressed={group_by_room}
+                    class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-all duration-150 {group_by_room
+                        ? '!bg-primary-600 !text-white !shadow-sm ring-1 ring-primary-700'
+                        : '!bg-transparent !text-surface-700 hover:!bg-surface-100-900 hover:!text-surface-950 dark:!text-surface-200 dark:hover:!text-surface-50'}">
                     <span class="fas fa-layer-group text-xs" aria-hidden="true"></span>
-                    <span class="hidden sm:inline">By Room</span>
+                    <span>By Room</span>
                 </button>
                 <button
                     type="button"
                     onclick={() => (group_by_room = false)}
                     title="Show all sessions as a flat list"
-                    class="border-surface-200-800 flex items-center gap-1.5 border-l px-3 py-1.5 font-medium transition-colors duration-150 {!group_by_room
-                        ? 'preset-filled-primary'
-                        : 'opacity-60 hover:opacity-90 hover:bg-surface-100-900'}">
+                    aria-pressed={!group_by_room}
+                    class="border-surface-200-800 flex items-center gap-1.5 rounded-md border-l px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-all duration-150 {!group_by_room
+                        ? '!bg-primary-600 !text-white !shadow-sm ring-1 ring-primary-700'
+                        : '!bg-transparent !text-surface-700 hover:!bg-surface-100-900 hover:!text-surface-950 dark:!text-surface-200 dark:hover:!text-surface-50'}">
                     <span class="fas fa-list text-xs" aria-hidden="true"></span>
-                    <span class="hidden sm:inline">Flat List</span>
+                    <span>Flat List</span>
                 </button>
             </div>
             <button
@@ -457,10 +459,11 @@ function export_json() {
                 onclick={export_csv}
                 disabled={meetings_filtered.length === 0}
                 title="Export filtered meetings as CSV"
-                class="btn btn-sm preset-tonal-primary disabled:opacity-40">
+                class="btn btn-sm preset-tonal-surface border-surface-200-800 border disabled:opacity-40">
                 <span class="fas fa-file-csv" aria-hidden="true"></span>
                 <span class="ml-1 hidden sm:inline">CSV</span>
             </button>
+            {#if $ae_loc.edit_mode}
             <button
                 type="button"
                 onclick={export_json}
@@ -470,6 +473,7 @@ function export_json() {
                 <span class="fas fa-file-code" aria-hidden="true"></span>
                 <span class="ml-1 hidden sm:inline">JSON</span>
             </button>
+            {/if}
         </div>
     </div>