Skip to content

Conversation

p2arthur
Copy link
Contributor

🚀 Tailwind v4 Upgrade & New Mobile Drawer

Summary

Upgraded Tailwind CSS to v4 and implemented a new menu drawer for mobile and tablet to improve responsiveness and accessibility.

Changes

  • Updated project to Tailwind v4 (new utilities and config).
  • Added right-side drawer containing Search, Navigation, Settings, Network Select, and Theme Toggle.
  • Removed the old sidebar on small screens to free up space.
  • Fixed issue where the search bar was hidden or inaccessible on mobile.

Result

Cleaner mobile layout, better navigation flow, and consistent styling across breakpoints.

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Oct 22, 2025

Deploying algokit-lora with  Cloudflare Pages  Cloudflare Pages

Latest commit: 11e5a4d
Status:🚫  Build failed.

View logs

{/* Items */}
<nav className="p-3 space-y-1">
{menuItems.map((item, idx) => (
<div onClick={handleClose}>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You’re missing a unique key for each child, React will warn about that.

Possible fixes:

  • key={item.urlTemplate.toString()}
  • or add an id field to menuItems and use key={item.id}

</button>
</div>

<Search />

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be missing className="w-full" on the <Search /> unless the design intentionally limits its width.

Suggested change
<Search />
<Search className="w-full"/>

"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.20",
"eslint-plugin-tailwindcss": "^3.17.5",

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👀

Noticed eslint-plugin-tailwindcss was removed here: is that because it’s still in beta for Tailwind v4?

formAction={
<FormActions>
{/* eslint-disable-next-line tailwindcss/no-custom-classname */}
<SubmitButton className="plausible-event-name=app-lab-use-existing-app-id">Use existing</SubmitButton>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed that buttons appear to have lost the pointer.

const [layout, setLayout] = useLayout()
const isOpen = !!layout.isDrawerMenuExpanded

const menuItems = useMemo(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to extract the json out into a seperate file and share with the left side menu component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants