reduced width layouts

Author: shakyShane

special-pages/pages/history/app/components/App.jsx

@@ -18,13 +18,15 @@ import { useURLReflection } from '../global/hooks/useURLReflection.js';
 import { useSearchCommit } from '../global/hooks/useSearchCommit.js';
 import { useRangesData } from '../global/Providers/HistoryServiceProvider.js';
 import { usePlatformName } from '../types.js';
+import { useLayoutMode } from '../global/hooks/useLayoutMode.js';
 
 export function App() {
     const platformName = usePlatformName();
     const mainRef = useRef(/** @type {HTMLElement|null} */ (null));
     const { isDarkMode } = useEnv();
     const ranges = useRangesData();
     const query = useQueryContext();
+    const mode = useLayoutMode();
 
     /**
      * Handlers that are global in nature
@@ -60,7 +62,7 @@ export function App() {
     }, [onKeyDown, query]);
 
     return (
-        <div class={styles.layout} data-theme={isDarkMode ? 'dark' : 'light'} data-platform={platformName}>
+        <div class={styles.layout} data-theme={isDarkMode ? 'dark' : 'light'} data-platform={platformName} data-layout-mode={mode}>
             <aside class={styles.aside}>
                 <Sidebar ranges={ranges} />
             </aside>

special-pages/pages/history/app/components/App.module.css

@@ -15,6 +15,12 @@ body {
     --main-padding-right: 76px;
     --windows-scrollbar: 15px;
 
+    &[data-layout-mode="reduced"] {
+        --sidebar-width: 230px;
+        --main-padding-left: 28px;
+        --main-padding-right: 56px;
+    }
+
     display: grid;
     grid-template-columns: var(--sidebar-width) 1fr;
     grid-template-rows: max-content 1fr;

special-pages/pages/history/app/components/Header.js

@@ -84,7 +84,7 @@ function Controls({ term, range, domain }) {
 
     return (
         <div class={styles.controls}>
-            <button class={styles.largeButton} onClick={onClick} aria-disabled={ariaDisabled} title={title}>
+            <button class={styles.largeButton} onClick={onClick} aria-disabled={ariaDisabled} title={title} tabindex={0}>
                 <Trash />
                 <span>{buttonTxt}</span>
             </button>

special-pages/pages/history/app/components/Item.js

@@ -53,7 +53,7 @@ export const Item = memo(
                     <a href={props.url} data-url={props.url} class={styles.entryLink} tabindex={0}>
                         {title}
                     </a>
-                    <span class={styles.domain} data-testid="Item.domain">
+                    <span class={styles.domain} data-testid="Item.domain" title={props.domain}>
                         {props.domain}
                     </span>
                     <span class={styles.time}>{dateTimeOfDay}</span>

special-pages/pages/history/app/components/Item.module.css

@@ -110,7 +110,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
 
-    @media screen and (min-width: 800px) {
+    [data-layout-mode="normal"] & {
         flex-shrink: 0;
     }
 

special-pages/pages/history/app/global/hooks/useLayoutMode.js

@@ -0,0 +1,33 @@
+import { useSignal } from '@preact/signals';
+import { useLayoutEffect } from 'preact/hooks';
+
+/**
+ * This hook listens to changes in the viewport width and provides a
+ * reactive signal indicating whether the layout mode should be 'reduced'
+ * or 'normal'.
+ *
+ * - 'reduced': For narrow viewports (width <= 799px).
+ * - 'normal': For wider viewports (width > 799px).
+ *
+ * @returns {import('@preact/signals').ReadonlySignal<'reduced' | 'normal'>}
+ *          A signal representing the current layout mode ('reduced' or 'normal').
+ */
+export function useLayoutMode() {
+    const mode = useSignal(/** @type {'reduced' | 'normal'} */ (window.matchMedia('(max-width: 799px)').matches ? 'reduced' : 'normal'));
+
+    useLayoutEffect(() => {
+        const mediaQuery = window.matchMedia('(max-width: 799px)');
+        const handleChange = () => {
+            mode.value = mediaQuery.matches ? 'reduced' : 'normal';
+        };
+
+        handleChange();
+        mediaQuery.addEventListener('change', handleChange);
+
+        return () => {
+            mediaQuery.removeEventListener('change', handleChange);
+        };
+    }, []);
+
+    return mode;
+}