fix: padding around 'Select a tab' label in mobile view (#10150) (#10191

)

* added padding to the select a tab label

* added padding to the select a tab label

* added padding to the select a tab label

* style: reorder utility classes for improved readability

* rearranged class names according to tailwind's recommended order

applied prettier tailwind CSS plugin for class sorting

components/event/EventTabs.js

@@ -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="mb-2 block w-full rounded-md border-primary-medium-low px-3 py-1 focus:border-secondary-low focus:ring-secondary-low dark:bg-primary-medium dark:focus:border-secondary-low dark:focus:ring-secondary-low"
           options={tabs.map((tab) => ({ label: tab.title, value: tab.title }))}
         />
       </div>