FIX : [BUG] No padding around 'Select a tab' label in mobile view #10150 #10191
Conversation
|
Hey there! Just checking in to see if there's anything else I can do to help get this PR merged. Let me know if there's any concerns about this |
components/event/EventTabs.js
Outdated
| @@ -18,7 +18,7 @@ export function EventTabs({ tabs, eventType, onEventTypeChange }) { | |||
| label="Select a tab" | |||
| value={tabs.find((tab) => tab.key === eventType)?.title} | |||
| onChange={(e) => changeTab(e)} | |||
| className="block w-full rounded-md border-primary-medium-low dark:bg-primary-medium dark:focus:border-secondary-low dark:focus:ring-secondary-low focus:border-secondary-low focus:ring-secondary-low" | |||
| className="block w-full rounded-md border-primary-medium-low dark:bg-primary-medium dark:focus:border-secondary-low dark:focus:ring-secondary-low focus:border-secondary-low focus:ring-secondary-low px-3 py-1 mb-2" | |||
There was a problem hiding this comment.
Looks good! Perhaps consider adding the classes before the dark: and focus: variants. Doesn't Prettier usually take care of that automatically?
There was a problem hiding this comment.
Thank you for the feedback, Arvind I've reordered the class names as suggested, with the dark and focus variants now at the end. As for Prettier, it doesn't seem to sort the class names automatically, so I manually rearranged them. Let me know if there's anything else I can do to improve the PR. Thanks again!
There was a problem hiding this comment.
You need the Tailwind plugin for sorting
https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
There was a problem hiding this comment.
Thanks @eugene4545!
Oh I didn't know about the extra plugin, thanks @ThomasCode92 👍🏻
There was a problem hiding this comment.
thanks @ThomasCode92 , I have applied the tailwind prettier plugin on the code to rearrange the class name
There was a problem hiding this comment.
Hey @arvind I was wondering if there are any remaining issues that need to be addressed.
There was a problem hiding this comment.
No, I think the pr solves the mentioned issue. Let's wait for others to review it and get it merged :)
applied prettier tailwind CSS plugin for class sorting
|
Hey! @kumarsonsoff3 I wanted to follow up on this PR that was opened about a month ago. Are there any outstanding concerns or feedback that I can help address to move this forward? Thank you for your time! |
|
Hey @kumarsonsoff3 , @ArvindParekh , @SaraJaoude! Hope everyone's doing well! I reached out to @kumarsonsoff3 about my PR a while back and wanted to follow up with the team. I understand you're all busy, and I appreciate your time and efforts. I'm looking for any feedback or updates to help move this along. If anyone has a chance to take a look, I'd really appreciate it! Thanks, everyone! |
There was a problem hiding this comment.
Looks good to me. Great collaboration everyone! 👍
--
Sorry for delays, @eugene4545. I was away for a while and might missed your notification. Thanks for being patient, but please avoid tagging multiple maintainers at a time because every maintainer gets a notification for each activity on the project, it just creates extra noise for everyone
|
Thank you for your contribution @eugene4545 👍🏻 |
Closes #10150
Fixes Issue
Closes #10150
Changes proposed (
The select label in the UI was lacking proper padding, which led to alignment issues on smaller screens. To address this, I've added the following Tailwind CSS utility classes to the label's style: "px-6 py-1 mb-2" in the "select" tag inside "EventsTab.js" under the "Events" folder
Check List (Check all the applicable boxes)
Screenshots
Before
After
Note to reviewers