Bug 692 - Header elements do not flow predictably

docs/N1MM-SETUP.md

@@ -53,12 +53,12 @@ If you're running directly with Node, restart the server after changing your `.e
 
 All settings go in your `.env` or `.env.local` file:
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `N1MM_UDP_ENABLED` | `false` | Set to `true` to enable the UDP listener |
-| `N1MM_UDP_PORT` | `12060` | UDP port to listen on (must match N1MM+ config) |
-| `N1MM_MAX_QSOS` | `200` | Maximum QSOs to keep in memory |
-| `N1MM_QSO_MAX_AGE_MINUTES` | `360` | QSOs older than this (6 hours) are pruned automatically |
+| Variable                   | Default | Description                                             |
+| -------------------------- | ------- | ------------------------------------------------------- |
+| `N1MM_UDP_ENABLED`         | `false` | Set to `true` to enable the UDP listener                |
+| `N1MM_UDP_PORT`            | `12060` | UDP port to listen on (must match N1MM+ config)         |
+| `N1MM_MAX_QSOS`            | `200`   | Maximum QSOs to keep in memory                          |
+| `N1MM_QSO_MAX_AGE_MINUTES` | `360`   | QSOs older than this (6 hours) are pruned automatically |
 
 ## Docker Users
 

src/App.jsx

@@ -13,6 +13,7 @@ import ModernLayout from './layouts/ModernLayout.jsx';
 
 import { resetLayout } from './store/layoutStore.js';
 import { RigProvider } from './contexts/RigContext.jsx';
+import { AppMenuProvider } from './contexts/AppMenuContext';
 
 import {
   useSpaceWeather,
@@ -49,6 +50,7 @@ import WhatsNew from './components/WhatsNew.jsx';
 import { initCtyLookup } from './utils/ctyLookup.js';
 import { getAllLayers } from './plugins/layerRegistry.js';
 import ActivateFilterManager from './components/ActivateFilterManager.jsx';
+import AppMenu from './components/menus/AppMenu';
 
 // Load DXCC entity database on app startup (non-blocking)
 initCtyLookup();
@@ -521,91 +523,104 @@ const App = () => {
   };
 
   return (
-    <div
-      style={{
-        width: '100vw',
-        height: '100vh',
-        background: 'var(--bg-primary)',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        overflow: 'hidden',
-      }}
-    >
-      <RigProvider rigConfig={config.rigControl || { enabled: false, host: 'http://localhost', port: 5555 }}>
-        {config.layout === 'dockable' ? (
-          <DockableLayout key={layoutResetKey} {...layoutProps} />
-        ) : config.layout === 'classic' || config.layout === 'tablet' || config.layout === 'compact' ? (
-          <ClassicLayout {...layoutProps} />
-        ) : (
-          <ModernLayout {...layoutProps} />
-        )}
-      </RigProvider>
-
-      {/* Modals */}
-      <SettingsPanel
-        isOpen={showSettings}
-        onClose={() => setShowSettings(false)}
-        config={config}
-        onSave={handleSaveConfig}
-        onResetLayout={handleResetLayout}
-        satellites={satellites.data}
-        satelliteFilters={satelliteFilters}
-        onSatelliteFiltersChange={setSatelliteFilters}
-        mapLayers={mapLayers}
-        onToggleDeDxMarkers={toggleDeDxMarkers}
-        onToggleDXNews={toggleDXNews}
-        wakeLockStatus={wakeLockStatus}
-      />
-      <DXFilterManager
-        filters={dxFilters}
-        onFilterChange={setDxFilters}
-        isOpen={showDXFilters}
-        onClose={() => setShowDXFilters(false)}
-      />
-      <PSKFilterManager
-        filters={pskFilters}
-        onFilterChange={setPskFilters}
-        isOpen={showPSKFilters}
-        onClose={() => setShowPSKFilters(false)}
-        callsign={config.callsign}
-        locator={config.locator}
-      />
-      <KeybindingsPanel
-        isOpen={showKeybindings}
-        onClose={() => setShowKeybindings(false)}
-        keybindings={keybindingsList}
-      />
-      <ActivateFilterManager
-        name="POTA"
-        filters={potaFilters}
-        onFilterChange={setPotaFilters}
-        isOpen={showPotaFilters}
-        onClose={() => setShowPotaFilters(false)}
-      />
-      <ActivateFilterManager
-        name="SOTA"
-        filters={sotaFilters}
-        onFilterChange={setSotaFilters}
-        isOpen={showSotaFilters}
-        onClose={() => setShowSotaFilters(false)}
-      />
-      <ActivateFilterManager
-        name="WWFF"
-        filters={wwffFilters}
-        onFilterChange={setWwffFilters}
-        isOpen={showWwffFilters}
-        onClose={() => setShowWwffFilters(false)}
-      />
-      <ActivateFilterManager
-        name="WWBOTA"
-        filters={wwbotaFilters}
-        onFilterChange={setWwbotaFilters}
-        isOpen={showWwbotaFilters}
-        onClose={() => setShowWwbotaFilters(false)}
-      />
-      <WhatsNew />
-    </div>
+    <AppMenuProvider>
+      <div
+        id="app-container"
+        className={config.layout}
+        style={{
+          width: '100vw',
+          height: '100vh',
+          background: 'var(--bg-primary)',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          overflow: 'hidden',
+        }}
+      >
+        <RigProvider rigConfig={config.rigControl || { enabled: false, host: 'http://localhost', port: 5555 }}>
+          {config.layout === 'dockable' ? (
+            <DockableLayout key={layoutResetKey} {...layoutProps} />
+          ) : config.layout === 'classic' || config.layout === 'tablet' || config.layout === 'compact' ? (
+            <ClassicLayout {...layoutProps} />
+          ) : (
+            <ModernLayout {...layoutProps} />
+          )}
+        </RigProvider>
+
+        {/* Modals */}
+        <SettingsPanel
+          isOpen={showSettings}
+          onClose={() => setShowSettings(false)}
+          config={config}
+          onSave={handleSaveConfig}
+          onResetLayout={handleResetLayout}
+          satellites={satellites.data}
+          satelliteFilters={satelliteFilters}
+          onSatelliteFiltersChange={setSatelliteFilters}
+          mapLayers={mapLayers}
+          onToggleDeDxMarkers={toggleDeDxMarkers}
+          onToggleDXNews={toggleDXNews}
+          wakeLockStatus={wakeLockStatus}
+        />
+        <DXFilterManager
+          filters={dxFilters}
+          onFilterChange={setDxFilters}
+          isOpen={showDXFilters}
+          onClose={() => setShowDXFilters(false)}
+        />
+        <PSKFilterManager
+          filters={pskFilters}
+          onFilterChange={setPskFilters}
+          isOpen={showPSKFilters}
+          onClose={() => setShowPSKFilters(false)}
+          callsign={config.callsign}
+          locator={config.locator}
+        />
+        <KeybindingsPanel
+          isOpen={showKeybindings}
+          onClose={() => setShowKeybindings(false)}
+          keybindings={keybindingsList}
+        />
+        <ActivateFilterManager
+          name="POTA"
+          filters={potaFilters}
+          onFilterChange={setPotaFilters}
+          isOpen={showPotaFilters}
+          onClose={() => setShowPotaFilters(false)}
+        />
+        <ActivateFilterManager
+          name="SOTA"
+          filters={sotaFilters}
+          onFilterChange={setSotaFilters}
+          isOpen={showSotaFilters}
+          onClose={() => setShowSotaFilters(false)}
+        />
+        <ActivateFilterManager
+          name="WWFF"
+          filters={wwffFilters}
+          onFilterChange={setWwffFilters}
+          isOpen={showWwffFilters}
+          onClose={() => setShowWwffFilters(false)}
+        />
+        <ActivateFilterManager
+          name="WWBOTA"
+          filters={wwbotaFilters}
+          onFilterChange={setWwbotaFilters}
+          isOpen={showWwbotaFilters}
+          onClose={() => setShowWwbotaFilters(false)}
+        />
+        <WhatsNew />
+        <AppMenu
+          config={config}
+          showUpdateButton={isLocalInstall}
+          updateInProgress={updateInProgress}
+          onUpdateClick={handleUpdateClick}
+          onSettingsClick={() => setShowSettings(true)}
+          onFullscreenToggle={handleFullscreenToggle}
+          isFullscreen={isFullscreen}
+        />
+      </div>
+    </AppMenuProvider>
   );
 };
 

src/components/DonateButton.jsx

@@ -8,7 +8,7 @@ const PAYPAL_URL = 'https://www.paypal.com/donate/?hosted_button_id=MMYPQBLA6SW6
 const COFFEE_URL = 'https://buymeacoffee.com/k0cjh';
 const MERCH_URL = 'https://openhamclock.printify.me';
 
-export default function DonateButton({ compact = false, fontSize = '12px', padding = '6px 10px' }) {
+export default function DonateButton({ compact = false, className = '' }) {
   const [open, setOpen] = useState(false);
 
   const close = useCallback(() => setOpen(false), []);
@@ -25,24 +25,7 @@ export default function DonateButton({ compact = false, fontSize = '12px', paddi
 
   return (
     <>
-      <button
-        onClick={() => setOpen(true)}
-        title="Support OpenHamClock"
-        style={{
-          background: 'linear-gradient(135deg, #ff813f 0%, #ffdd00 100%)',
-          border: 'none',
-          padding,
-          borderRadius: '4px',
-          color: '#000',
-          fontSize,
-          cursor: 'pointer',
-          fontWeight: '600',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '4px',
-          whiteSpace: 'nowrap',
-        }}
-      >
+      <button onClick={() => setOpen(true)} title="Support OpenHamClock" className={`${className} support-us-button`}>
         ❤️{compact ? '' : ' Support Us'}
       </button>
 
@@ -56,7 +39,7 @@ export default function DonateButton({ compact = false, fontSize = '12px', paddi
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            zIndex: 100000,
+            zIndex: 10001,
             backdropFilter: 'blur(3px)',
           }}
         >