style: Adjust column widths in vacation request view

- Conditionally set col widths based on tab
- Hide user select when not on explore tab
- Adjust status and type select widths for team tab

Author: Mahmoud-Emad

client/src/views/RequestsView.vue

@@ -23,24 +23,21 @@
       </v-tabs>
 
       <v-row class="px-2">
-        <v-col :cols="tab === 'explore' ? 3 : 4">
-          <v-autocomplete v-if="tab === 'explore'" hide-details="auto" v-model="selectedUser" :items="users"
-            item-title="full_name" item-value="id" label="Select User" return-object
-            :disabled="isLoadingUsers || isLoadingVacations" :loading="isLoadingUsers || isLoadingVacations">
+        <v-col v-if="tab === 'explore'" cols="3">
+          <v-autocomplete hide-details="auto" v-model="selectedUser" :items="users" item-title="full_name"
+            item-value="id" label="Select User" return-object :disabled="isLoadingUsers || isLoadingVacations"
+            :loading="isLoadingUsers || isLoadingVacations">
           </v-autocomplete>
-          <div v-else class="text-subtitle-1 py-1">
-            Context: <span class="font-weight-bold text-capitalize">{{ tab }}</span>
-          </div>
         </v-col>
-        <v-col :cols="tab === 'explore' ? 3 : 3">
+        <v-col :cols="tab === 'explore' ? 3 : (tab === 'team' ? 6 : 4)">
           <v-select :loading="isLoadingVacations" :disabled="isLoadingVacations" :items="requestStatus" label="Status"
             v-model="selectedStatus" hide-details="auto" />
         </v-col>
-        <v-col cols="3">
+        <v-col :cols="tab === 'explore' ? 3 : (tab === 'team' ? 6 : 4)">
           <v-select :loading="isLoadingVacations" :disabled="isLoadingVacations" :items="supportedRequestTypes"
             label="Request type" v-model="selectedType" hide-details="auto" />
         </v-col>
-        <v-col cols="3" v-if="tab !== 'team'">
+        <v-col :cols="tab === 'explore' ? 3 : 4" v-if="tab !== 'team'">
           <v-select :loading="isLoadingVacations" :disabled="isLoadingVacations" :items="supportedYears" label="Year"
             v-model="selectedYear" hide-details="auto" />
         </v-col>