feat: onboarding, layout fixes

Author: grantiguess

src/RedstringMenu.jsx

@@ -745,6 +745,36 @@ const RedstringMenu = ({
                           {debugMode ? 'Hide Debug Overlay' : 'Show Debug Overlay'}
                         </div>
 
+                        <div
+                          className="submenu-item"
+                          onClick={async () => {
+                            try {
+                              // Clear onboarding flag
+                              localStorage.removeItem('redstring-alpha-welcome-seen');
+
+                              // Clear folder storage
+                              localStorage.removeItem('redstring_workspace_folder_path');
+
+                              // Clear IndexedDB folder storage
+                              indexedDB.deleteDatabase('RedstringFolderStorage');
+
+                              // Clear session flags
+                              sessionStorage.clear();
+
+                              console.log('[Debug] Onboarding state reset - reloading...');
+
+                              // Reload to trigger first-time flow
+                              window.location.reload();
+                            } catch (error) {
+                              console.error('[Debug] Failed to reset onboarding:', error);
+                            }
+                          }}
+                          style={{ cursor: 'pointer' }}
+                        >
+                          <RefreshCw size={14} style={{ marginRight: '8px' }} />
+                          Reset Onboarding Flow
+                        </div>
+
                         <div
                           className="submenu-item"
                           onMouseEnter={handleRegularSubmenuItemHover}

src/components/AlphaOnboardingModal.jsx

@@ -17,13 +17,14 @@ const AlphaOnboardingModal = ({
     width: typeof window !== 'undefined' ? window.innerWidth : 1200,
     height: typeof window !== 'undefined' ? window.innerHeight : 900
   }));
-  const isCompactLayout = viewportSize.width <= 768;
+  // Only use compact layout on truly small screens (mobile)
+  const isCompactLayout = viewportSize.width <= 500;
   const modalWidth = isCompactLayout
     ? Math.min(Math.max(viewportSize.width - 24, 320), 540)
     : 600;
   const modalHeight = isCompactLayout
     ? Math.min(Math.max(viewportSize.height * 0.85, 400), 550)
-    : 600; // Reduced height for simpler modal
+    : 520; // Reduced height for simpler modal
 
   useEffect(() => {
     const handleResize = () => {

src/components/StorageSetupModal.jsx

@@ -18,13 +18,14 @@ const StorageSetupModal = ({
     width: typeof window !== 'undefined' ? window.innerWidth : 1200,
     height: typeof window !== 'undefined' ? window.innerHeight : 900
   }));
-  const isCompactLayout = viewportSize.width <= 768;
+  // Only use compact layout on truly small screens (mobile)
+  const isCompactLayout = viewportSize.width <= 500;
   const modalWidth = isCompactLayout
     ? Math.min(Math.max(viewportSize.width - 24, 320), 540)
     : 600;
   const modalHeight = isCompactLayout
     ? Math.min(Math.max(viewportSize.height * 0.85, 400), 550)
-    : 550;
+    : 520;
 
   const showBrowserStorageOption = !isElectron();