fix(web): allow dashboard header layout to wrap gracefully on smaller…

[mayankdev-oss]

This PR fixes a layout bug on the repository dashboard where the action buttons overlap and clip into the search bar text field on narrower viewport sizes

By adding md:flex-wrap and switching to separate layout spacing variables md:gap-x-10 md:gap-y-2 on the main header row inside Header.vue the layout elements can now wrap into multiple rows safely if screen real estate runs tight. This keeps the UI completely accessible and looking great on smaller laptop or tablet screens while the team continues discussing long term button locations
Related Issue

Fixes #6739
Checklist

[x] Added responsive flex wrapping utility classes

[x] Separated horizontal and vertical wrap spacing boundaries

[x] Verified layout scaling behavior on responsive breakpoints

[qwerty287]

Thanks, could you post a screenshot?

[mayankdev-oss]

@qwerty287 I am currently experiencing some local environment issues preventing the full dashboard from rendering. I have verified the CSS fix by manually applying flex-wrap and gap classes to the header container in the browser inspector, which successfully resolves the overlap on narrower viewports. Once the CI build completes, if you can trigger a preview deployment, I will be happy to provide a live screenshot from there.

[qwerty287]

Our ci is down right now, we have to fix that first...

[qwerty287]

Works again, the pr image should be available

[6543]

tested, cant se a behaviour difference in firefox