Moves the `#mobileSearchContainer` from the bottom-right corner to the top of the viewport (`top-4`). This ensures that the search input remains visible when the virtual keyboard is active on mobile devices, preventing it from being covered.
- Updated `index.html` to change classes from `bottom-6 right-6 origin-bottom-right` to `top-4 left-4 right-4 origin-top`.
- Removed `w-[calc(...)]` in favor of `left-4 right-4` for simpler full-width behavior with margins.
- Ran `npm run build:css` to update generated CSS.
Run `npm run format` and `npm run lint`.
Fix stylelint configuration to correctly parse variables with units in their names.
Migrate raw CSS measurements to tokens in `css/tokens.css` and update usages in `css/tailwind.source.css` and HTML templates.
Improve `scripts/check-design-tokens.mjs` to handle variable names with unit-like suffixes.
Files changed:
- css/tailwind.source.css (formatted and fixed lint)
- css/tokens.css (added tokens)
- stylelint.config.cjs (fixed regex)
- scripts/check-design-tokens.mjs (improved detection logic)
- components/profile-modal.html (fixed arbitrary values)
- index.html (fixed arbitrary values)
Updates the mobile search FAB (#mobileSearchFab) to use `bg-accent-strong` instead of `bg-critical`.
This ensures the icon color matches the "Upload Video" button, respecting the active theme override (which sets the accent color to red).
Verified visually using a Playwright script and screenshot validation.
Verified by running `npm run build:css` and `npm run test:unit`.
Adds a Floating Action Button (FAB) for search on mobile devices, which expands into a full search bar upon interaction.
- Updates `index.html` to include the FAB and search container.
- Updates `js/index.js` to handle toggle logic and search submission.
- Uses `bg-critical` for the FAB to meet the "Red Circle" requirement.
- Hides the new elements on desktop to maintain existing behavior.
google-labs-jules[bot]