a8dc4577423d0267189157df9a17558e4782d728
Critical mobile bugs flagged from an iPhone screenshot. 1) Mobile hamburger menu — all main nav items (HOME / SHOW COVERAGE / DIRECTORY / FORUM / READING LIST) were `text-white` on `bg-[#F8FAFC]`, i.e. white-on-light. Effectively invisible. Legacy styling from the dark-theme era that never got updated. Flipped to `text-[#0F172A]` + `hover:bg-[#FFFFFF]` + `border-[#DCE6F2]` to match the My Profile / WP Import links right below them that were already correctly themed. 2) Secondary top nav (social icons / language switcher / Sign In + Join / newsletter email input) was a single h-8 flex row that always rendered — on a phone-width viewport the row spills the email input off the right edge. Added `hidden md:flex` so the whole bar disappears on mobile. Affordances stay reachable via the hamburger menu, in-forum Sign In/Join buttons, and the footer. 3) Forum auth pages (login, register, forgot-password, reset-password) had `text-white` on every H1 AND on every form input that uses `bg-[#F8FAFC]`. So users opening any of those four pages saw a blank white card with invisible labels and couldn't see what they were typing into the password fields. Same dark-theme regression as #1. Blanket-replaced `text-white` with `text-[#0F172A]` across all four files, then restored `text-white` only inside classNames that also contain `bg-[#1D4ED8]` / `bg-[#1E3A8A]` / `brand-gradient` (the submit buttons — those WERE correct). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Next.js
A modern Next.js 15 application built with TypeScript and Tailwind CSS.
🚀 Features
- Next.js 15 - Latest version with improved performance and features
- React 19 - Latest React version with enhanced capabilities
- Tailwind CSS - Utility-first CSS framework for rapid UI development
🛠️ Installation
- Install dependencies:
npm install
# or
yarn install
- Start the development server:
npm run dev
# or
yarn dev
- Open http://localhost:4028 with your browser to see the result.
📁 Project Structure
nextjs/
├── public/ # Static assets
├── src/
│ ├── app/ # App router components
│ │ ├── layout.tsx # Root layout component
│ │ └── page.tsx # Main page component
│ ├── components/ # Reusable UI components
│ ├── styles/ # Global styles and Tailwind configuration
├── next.config.mjs # Next.js configuration
├── package.json # Project dependencies and scripts
├── postcss.config.js # PostCSS configuration
└── tailwind.config.js # Tailwind CSS configuration
🧩 Page Editing
You can start editing the page by modifying src/app/page.tsx. The page auto-updates as you edit the file.
🎨 Styling
This project uses Tailwind CSS for styling with the following features:
- Utility-first approach for rapid development
- Custom theme configuration
- Responsive design utilities
- PostCSS and Autoprefixer integration
📦 Available Scripts
npm run dev- Start development server on port 4028npm run build- Build the application for productionnpm run start- Start the development servernpm run serve- Start the production servernpm run lint- Run ESLint to check code qualitynpm run lint:fix- Fix ESLint issues automaticallynpm run format- Format code with Prettier
📱 Deployment
Build the application for production:
npm run build
📚 Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API
- Learn Next.js - an interactive Next.js tutorial
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
🙏 Acknowledgments
- Built with Rocket.new
- Powered by Next.js and React
- Styled with Tailwind CSS
Built with ❤️ on Rocket.new
Description
Languages
TypeScript
93.7%
PLpgSQL
4.4%
CSS
1.6%
JavaScript
0.3%