Conversation
…ind v4 util classes
…pushed to further pr
Deploying algokit-lora with
|
| Latest commit: |
cb56025
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://34b9b653.algokit-lora.pages.dev |
| Branch Preview URL: | https://feat-mobile-menu-drawer.algokit-lora.pages.dev |
| formAction={ | ||
| <FormActions> | ||
| {/* eslint-disable-next-line tailwindcss/no-custom-classname */} | ||
| <SubmitButton className="plausible-event-name=app-lab-use-existing-app-id">Use existing</SubmitButton> |
There was a problem hiding this comment.
I noticed that buttons appear to have lost the pointer.
There was a problem hiding this comment.
Nice catch! might've been something to do with the tailwind migration script. I'll fix this
There was a problem hiding this comment.
Tailwind v3’s preflight automatically set buttons to cursor: pointer, but that was removed in v4.
I restored this behavior by adding a global rule in the index CSS so all buttons have it again—keeping everything consistent with existing tests.
| const [layout, setLayout] = useLayout() | ||
| const isOpen = !!layout.isDrawerMenuExpanded | ||
|
|
||
| const menuItems = useMemo( |
There was a problem hiding this comment.
We should be able to extract the json out into a seperate file and share with the left side menu component.
mrcointreau
left a comment
mrcointreau
left a comment
There was a problem hiding this comment.
Are you able to you see real-time ESLint warnings and errors inside .tsx components?
For me, they weren’t showing up (for example, the tailwindcss/classnames-order rule wasn’t triggering). It looks like .vscode/settings.json currently limits ESLint validation to only "typescript", so the ESLint extension doesn’t run on React component files.
To get it working, I had to either:
-
In .vscode/settings.json
add"typescriptreact"to theeslint.validate` array:"eslint.validate": ["typescript", "typescriptreact"]
-
Or remove the
eslint.validatesetting entirely
After doing that, ESLint started showing real-time warnings and autofixes inside components again.
|
Looks good, noticed a few things whilst exploring.
|
| @@ -0,0 +1,29 @@ | |||
| // src/features/layout/config/menu-items.ts | |||
There was a problem hiding this comment.
| // src/features/layout/config/menu-items.ts |
| import SvgWizard from '@/features/common/components/icons/wizard' | ||
| import { Urls } from '@/routes/urls' | ||
|
|
||
| // ✅ Use an array of objects so it can be iterated |
There was a problem hiding this comment.
| // ✅ Use an array of objects so it can be iterated |
AI comment I'm guessing.
There was a problem hiding this comment.
Modals:
There were two different implementations - I fixed those to follow the same standards and fixed the parent that was responsible for the awkward animation we were having.
Table headers and Transaction wizard:
Based on the priorities we discussed I decided to split the completeness of the mobile update in two PRs. This one is the most impactful since there were big dependency and layout changes.
I mapped those that you mentioned (same behaviour in current prod) and plan to have a fix for those on a smaller PR soon.
There was a problem hiding this comment.
The table headers do look a little strange to me, but also happy if you fix in another PR.
3 participants
🚀 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
Result
Cleaner mobile layout, better navigation flow, and consistent styling across breakpoints.