From 7833ddd0831b047934fe787bce22ba9dd7da9580 Mon Sep 17 00:00:00 2001
From: Nic D <n_drolet@hotmail.ca>
Date: Wed, 4 Feb 2026 10:55:23 -0500
Subject: [PATCH 1/2] refactor(approvals): optimize approval page UI/UX for
 mobile

---
 .../components/details-dialog.vue             |  17 ++-
 .../mobile/overview-list-top-mobile.vue       |  81 +++++++++++
 .../components/overview-list-filters.vue      |   6 +-
 .../components/overview-list-top.vue          | 102 ++++++++++++++
 .../components/overview-list.vue              | 127 +++++-------------
 .../expense-dialog-list-item-mobile.vue       |   6 +-
 .../timesheets/components/shift-list.vue      |  20 ++-
 .../components/timesheet-wrapper.vue          |  20 +--
 8 files changed, 264 insertions(+), 115 deletions(-)
 create mode 100644 src/modules/timesheet-approval/components/mobile/overview-list-top-mobile.vue
 create mode 100644 src/modules/timesheet-approval/components/overview-list-top.vue

diff --git a/src/modules/timesheet-approval/components/details-dialog.vue b/src/modules/timesheet-approval/components/details-dialog.vue
index 07e3afe..3baabb9 100644
--- a/src/modules/timesheet-approval/components/details-dialog.vue
+++ b/src/modules/timesheet-approval/components/details-dialog.vue
@@ -23,6 +23,9 @@
         t('timesheet_approvals.table.unverified')
     );
     const approveButtonIcon = computed(() => isApproved.value ? 'lock' : 'lock_open');
+    const hasExpenses = computed(() => timesheet_store.timesheets.some(timesheet =>
+        Object.values(timesheet.weekly_expenses).some(hours => hours > 0))
+    );
 
     const onClickApproveAll = async () => {
         const employeeEmail = timesheet_store.current_pay_period_overview?.email;
@@ -69,7 +72,10 @@
                         class="q-px-xl"
                         @click="onClickApproveAll"
                     >
-                        <transition enter-active-class="animated swing" mode="out-in">
+                        <transition
+                            enter-active-class="animated swing"
+                            mode="out-in"
+                        >
                             <q-icon
                                 :key="isApproved ? '1' : '2'"
                                 :name="approveButtonIcon"
@@ -82,13 +88,16 @@
 
             <!-- employee pay period details using chart -->
             <div
-                v-if="is_dialog_open && !$q.platform.is.mobile"
+                v-if="is_dialog_open"
                 class="col-auto q-px-md no-wrap"
                 :class="$q.platform.is.mobile ? 'column' : 'row'"
             >
                 <DetailsDialogChartHoursWorked class="col" />
                 <DetailsDialogChartShiftTypes class="col" />
-                <DetailsDialogChartExpenses class="col" />
+                <DetailsDialogChartExpenses
+                    v-if="hasExpenses"
+                    class="col"
+                />
             </div>
 
             <div class="col-auto">
@@ -96,7 +105,7 @@
             </div>
 
             <!-- list of shifts -->
-            <div class="col-auto column no-wrap">
+            <div class="col-auto">
                 <TimesheetWrapper
                     mode="approval"
                     :employee-email="timesheet_store.current_pay_period_overview?.email"
diff --git a/src/modules/timesheet-approval/components/mobile/overview-list-top-mobile.vue b/src/modules/timesheet-approval/components/mobile/overview-list-top-mobile.vue
new file mode 100644
index 0000000..1e3ff1b
--- /dev/null
+++ b/src/modules/timesheet-approval/components/mobile/overview-list-top-mobile.vue
@@ -0,0 +1,81 @@
+<script
+    setup
+    lang="ts"
+>
+    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+    import OverviewListFilters from 'src/modules/timesheet-approval/components/overview-list-filters.vue';
+    import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
+
+    import { useQuasar } from 'quasar';
+    import { computed, ref } from 'vue';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import { useTimesheetApprovalApi } from '../../composables/use-timesheet-approval-api';
+    import type {
+        OverviewColumns,
+        PayPeriodOverviewFilters
+    } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+
+    const overviewFilters = defineModel<PayPeriodOverviewFilters>('filters', { required: true });
+    const visibleColumns = defineModel<OverviewColumns[]>('visibleColumns', { required: true });
+
+    const q = useQuasar();
+    const timesheetStore = useTimesheetStore();
+    const timesheetApprovalApi = useTimesheetApprovalApi();
+
+    const isShowingFilters = ref(false);
+
+    const filterButtonBgColor = computed(() => q.dark.isActive ? 'dark' : 'primary')
+</script>
+
+<template>
+    <div class="column full-width">
+        <div class="col-auto column no-wrap flex-center full-width">
+            <div class="col-auto row justify-between items-center full-width">
+                <PayPeriodNavigator
+                    class="col-auto"
+                    @date-selected="timesheetApprovalApi.getTimesheetOverviews"
+                    @pressed-next-button="timesheetApprovalApi.getTimesheetOverviews"
+                    @pressed-previous-button="timesheetApprovalApi.getTimesheetOverviews"
+                />
+
+                <q-btn
+                    push
+                    rounded
+                    color="accent"
+                    icon="download"
+                    class="col-auto q-px-xl"
+                    @click="timesheetStore.is_report_dialog_open = true"
+                />
+            </div>
+
+
+            <div class="col-auto q-py-sm full-width">
+                <QTableFilters
+                    v-model:search="overviewFilters.name_search_string"
+                    class="col-auto"
+                />
+            </div>
+
+            <q-btn
+                icon="filter_alt"
+                :color="filterButtonBgColor"
+                :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
+                class="col-auto full-width"
+                style="border-radius: 5px 5px 0 0;"
+                @click="isShowingFilters = !isShowingFilters"
+            />
+
+        </div>
+
+        <div class="col-auto full-width">
+            <q-slide-transition>
+                <OverviewListFilters
+                    v-if="isShowingFilters"
+                    v-model:filters="overviewFilters"
+                    v-model:visible-columns="visibleColumns"
+                    :class="`bg-${filterButtonBgColor}`"
+                />
+            </q-slide-transition>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/overview-list-filters.vue b/src/modules/timesheet-approval/components/overview-list-filters.vue
index fb82c72..7b945cc 100644
--- a/src/modules/timesheet-approval/components/overview-list-filters.vue
+++ b/src/modules/timesheet-approval/components/overview-list-filters.vue
@@ -18,14 +18,14 @@
 </script>
 
 <template>
-    <div class="column bg-primary text-uppercase q-px-sm text-white no-wrap">
-        <div class="col row no-wrap">
+    <div class="column text-uppercase text-white">
+        <div class="col row">
             <q-checkbox
                 v-model="filters.is_showing_inactive"
                 keep-color
                 color="accent"
                 :label="$t('timesheet_approvals.table.filter_active')"
-                class="col-auto"
+                class="col-auto q-px-sm"
                 :class="filters.is_showing_inactive ? 'text-accent text-weight-bolder' : 'text-white text-weight-medium'"
             />
 
diff --git a/src/modules/timesheet-approval/components/overview-list-top.vue b/src/modules/timesheet-approval/components/overview-list-top.vue
new file mode 100644
index 0000000..b19c2d0
--- /dev/null
+++ b/src/modules/timesheet-approval/components/overview-list-top.vue
@@ -0,0 +1,102 @@
+<script
+    setup
+    lang="ts"
+>
+    import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
+    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+    import OverviewListFilters from 'src/modules/timesheet-approval/components/overview-list-filters.vue';
+
+    import { useUiStore } from 'src/stores/ui-store';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
+    import type { OverviewColumns, PayPeriodOverviewFilters } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
+    import { ref } from 'vue';
+
+    const overviewFilters = defineModel<PayPeriodOverviewFilters>('filters', { required: true });
+    const visibleColumns = defineModel<OverviewColumns[]>('visibleColumns', { required: true });
+
+    const uiStore = useUiStore();
+    const timesheetStore = useTimesheetStore();
+    const timesheetApprovalApi = useTimesheetApprovalApi();
+
+    const isShowingFilters = ref(false);
+</script>
+
+<template>
+    <div class="column full-width">
+        <div class="col-auto row items-start full-width q-px-lg q-mt-md">
+            <div class="col row">
+                <PayPeriodNavigator
+                    @date-selected="timesheetApprovalApi.getTimesheetOverviews"
+                    @pressed-next-button="timesheetApprovalApi.getTimesheetOverviews"
+                    @pressed-previous-button="timesheetApprovalApi.getTimesheetOverviews"
+                    style="height: 40px;"
+                />
+
+                <q-space />
+
+                <div
+                    class="col-auto row no-wrap items-start"
+                    :class="$q.platform.is.mobile ? 'q-mb-md' : ''"
+                >
+                    <q-btn-toggle
+                        v-model="uiStore.user_preferences.is_timesheet_approval_grid"
+                        push
+                        rounded
+                        color="white"
+                        text-color="accent"
+                        toggle-color="accent"
+                        class="col-auto"
+                        :class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-sm'"
+                        :options="[
+                            { icon: 'grid_view', value: true },
+                            { icon: 'view_list', value: false },
+                        ]"
+                        style="height: 40px;"
+                    />
+
+                    <q-btn
+                        push
+                        rounded
+                        icon="download"
+                        color="accent"
+                        :label="$q.screen.lt.md ? '' : $t('shared.label.download')"
+                        class="col-auto q-mr-sm"
+                        style="height: 40px;"
+                        @click="timesheetStore.is_report_dialog_open = true"
+                    />
+
+                    <QTableFilters
+                        v-model:search="overviewFilters.name_search_string"
+                        class="col-auto q-mb-sm"
+                    />
+                </div>
+
+                <q-btn
+                    flat
+                    icon="filter_alt"
+                    color="white"
+                    :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
+                    class="col-auto q-ml-sm self-stretch bg-primary"
+                    style="border-radius: 5px 5px 0 0;"
+                    @click="isShowingFilters = !isShowingFilters"
+                />
+            </div>
+        </div>
+
+        <q-slide-transition>
+            <OverviewListFilters
+                v-if="isShowingFilters"
+                v-model:filters="overviewFilters"
+                v-model:visible-columns="visibleColumns"
+                class="q-mx-lg col-auto bg-primary"
+            />
+        </q-slide-transition>
+
+        <q-separator
+            color="primary"
+            size="5px"
+            class="q-mx-lg q-my-none q-pa-none"
+        />
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index 9e39a4d..d73296d 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -5,10 +5,10 @@
     /* eslint-disable */
     import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
     import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
-    import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
-    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
-    import OverviewListFilters from 'src/modules/timesheet-approval/components/overview-list-filters.vue';
+    import OverviewListTop from 'src/modules/timesheet-approval/components/overview-list-top.vue';
+    import OverviewListTopMobile from 'src/modules/timesheet-approval/components/mobile/overview-list-top-mobile.vue';
 
+    import { useQuasar } from 'quasar';
     import { computed, ref } from 'vue';
     import { useAuthStore } from 'src/stores/auth-store';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
@@ -17,14 +17,10 @@
     import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
     import { useUiStore } from 'src/stores/ui-store';
 
+    // ========== constants ========================================
+
     const WARNING_COLUMNS: OverviewColumns[] = ['EVENING', 'HOLIDAY', 'VACATION', 'SICK']
     const NEGATIVE_COLUMNS: OverviewColumns[] = ['OVERTIME', 'EMERGENCY']
-
-    const ui_store = useUiStore();
-    const auth_store = useAuthStore();
-    const timesheet_store = useTimesheetStore();
-    const timesheet_approval_api = useTimesheetApprovalApi();
-
     const TIME_COLUMNS: OverviewColumns[] = ['REGULAR', 'EVENING', 'EMERGENCY', 'OVERTIME', 'HOLIDAY', 'VACATION', 'SICK'];
     const VISIBLE_COLUMNS = ref<OverviewColumns[]>([
         'employee_first_name',
@@ -42,13 +38,18 @@
         'is_approved',
     ]);
 
+    // ========== state ========================================
+
     const { maxHeight } = defineProps<{
         maxHeight: number;
     }>();
 
-    const is_showing_filters = ref(false);
+    const q = useQuasar();
+    const uiStore = useUiStore();
+    const auth_store = useAuthStore();
+    const timesheet_store = useTimesheetStore();
+    const timesheet_approval_api = useTimesheetApprovalApi();
 
-    const overview_rows = computed(() => timesheet_store.pay_period_overviews.filter(overview => overview));
     const overview_filters = ref<PayPeriodOverviewFilters>({
         is_showing_inactive: false,
         is_showing_team_only: true,
@@ -56,6 +57,18 @@
         name_search_string: '',
     });
 
+    // ========== computed ========================================
+
+    const isGridMode = computed(() => q.platform.is.mobile ? true :
+        uiStore.user_preferences.is_timesheet_approval_grid
+    );
+
+    const overview_rows = computed(() =>
+        timesheet_store.pay_period_overviews.filter(overview => overview)
+    );
+
+    // ========== methods ========================================
+
     const onClickedDetails = async (row: TimesheetApprovalOverview) => {
         timesheet_store.current_pay_period_overview = row;
         await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
@@ -112,13 +125,13 @@
             :columns="pay_period_overview_columns"
             :table-colspan="pay_period_overview_columns.length"
             :visible-columns="VISIBLE_COLUMNS"
-            :grid="ui_store.user_preferences.is_timesheet_approval_grid"
+            :grid="isGridMode"
             :pagination="{ sortBy: 'is_active' }"
             :filter="overview_filters"
             :filter-method="filterEmployeeRows"
             :rows-per-page-options="[0]"
             class="bg-transparent"
-            :class="ui_store.user_preferences.is_timesheet_approval_grid ? '' : 'sticky-header-table sticky-first-column-table sticky-last-column-table no-shadow q-pb-sm'"
+            :class="uiStore.user_preferences.is_timesheet_approval_grid ? '' : 'sticky-header-table sticky-first-column-table sticky-last-column-table no-shadow q-pb-sm'"
             card-container-class="justify-center"
             table-class="q-pa-none q-mx-md rounded-10 bg-dark shadow-15"
             :no-data-label="$t('shared.error.no_data_found')"
@@ -130,85 +143,17 @@
             @row-click="(_evt, row: TimesheetApprovalOverview) => onClickedDetails(row)"
         >
             <template #top>
-                <div class="column full-width">
+                <OverviewListTopMobile
+                    v-if="$q.platform.is.mobile"
+                    v-model:filters="overview_filters"
+                    v-model:visible-columns="VISIBLE_COLUMNS"
+                />
 
-                    <div
-                        class="col-auto row items-start full-width q-px-lg"
-                        :class="$q.platform.is.mobile ? 'column flex-center' : 'row q-mt-md'"
-                    >
-                        <PayPeriodNavigator
-                            @date-selected="timesheet_approval_api.getTimesheetOverviews"
-                            @pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
-                            @pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
-                            :class="$q.platform.is.mobile ? 'q-mb-sm' : ''"
-                            style="height: 40px;"
-                        />
-
-                        <q-space />
-
-                        <div
-                            class="col-auto row no-wrap items-start"
-                            :class="$q.platform.is.mobile ? 'q-mb-md' : ''"
-                        >
-                            <q-btn-toggle
-                                v-model="ui_store.user_preferences.is_timesheet_approval_grid"
-                                push
-                                rounded
-                                color="white"
-                                text-color="accent"
-                                toggle-color="accent"
-                                class="col-auto"
-                                :class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-sm'"
-                                :options="[
-                                    { icon: 'grid_view', value: true },
-                                    { icon: 'view_list', value: false },
-                                ]"
-                                style="height: 40px;"
-                            />
-
-                            <q-btn
-                                push
-                                rounded
-                                icon="download"
-                                color="accent"
-                                :label="$q.screen.lt.md ? '' : $t('shared.label.download')"
-                                class="col-auto q-mr-sm"
-                                style="height: 40px;"
-                                @click="timesheet_store.is_report_dialog_open = true"
-                            />
-
-                            <QTableFilters
-                                v-model:search="overview_filters.name_search_string"
-                                class="col-auto q-mb-sm"
-                            />
-
-                            <q-btn
-                                flat
-                                icon="filter_alt"
-                                color="white"
-                                :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
-                                class="col q-ml-sm self-stretch bg-primary"
-                                style="border-radius: 5px 5px 0 0;"
-                                @click="is_showing_filters = !is_showing_filters"
-                            />
-                        </div>
-                    </div>
-
-                    <q-slide-transition>
-                        <OverviewListFilters
-                            v-if="is_showing_filters"
-                            v-model:filters="overview_filters"
-                            v-model:visible-columns="VISIBLE_COLUMNS"
-                            class="q-mx-lg col-auto"
-                        />
-                    </q-slide-transition>
-
-                    <q-separator
-                        color="primary"
-                        size="5px"
-                        class="q-mx-lg q-my-none q-pa-none"
-                    />
-                </div>
+                <OverviewListTop
+                    v-else
+                    v-model:filters="overview_filters"
+                    v-model:visible-columns="VISIBLE_COLUMNS"
+                />
             </template>
 
             <template #header="props">
diff --git a/src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue b/src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue
index 3842c92..864018c 100644
--- a/src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue
+++ b/src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue
@@ -3,7 +3,7 @@
     lang="ts"
 >
     /* eslint-disable */
-    import { date } from 'quasar';
+    import { date, useQuasar } from 'quasar';
     import { computed, ref } from 'vue';
     import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
     import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
@@ -16,6 +16,7 @@
 
     const expense = defineModel<Expense>({ required: true })
 
+    const q = useQuasar();
     const expenses_store = useExpensesStore();
     const expenses_api = useExpensesApi();
 
@@ -25,6 +26,7 @@
     // =========== computed ==================================
 
     const approved_class = computed(() => expense.value.is_approved ? ' bg-accent text-white' : '')
+    const primaryColor = computed(() => q.dark.isActive ? 'blue-grey-3' : 'primary')
 
     // =========== methods ===================================
 
@@ -120,7 +122,7 @@
                                 flat
                                 dense
                                 icon="las la-trash"
-                                color="primary"
+                                :color="primaryColor"
                                 size="lg"
                                 class="col-auto bg-dark q-px-xs"
                                 style="border-radius: 0 2px 2px 0;"
diff --git a/src/modules/timesheets/components/shift-list.vue b/src/modules/timesheets/components/shift-list.vue
index 538a547..f1f04b7 100644
--- a/src/modules/timesheets/components/shift-list.vue
+++ b/src/modules/timesheets/components/shift-list.vue
@@ -14,27 +14,34 @@
     import type { TimesheetDay } from 'src/modules/timesheets/models/timesheet.models';
     import { useI18n } from 'vue-i18n';
 
+    // ========== constants ========================================
+
     const CURRENT_DATE_STRING = new Date().toISOString().slice(0, 10);
 
+    // ========== state ========================================
+
     const emit = defineEmits<{
         'onCurrentDayComponentFound': [component: HTMLElement | undefined];
     }>();
 
+    const q = useQuasar();
     const { extractDate } = date;
     const { locale } = useI18n();
-    const q = useQuasar();
-
     const ui_store = useUiStore();
-    const timesheet_store = useTimesheetStore();
     const timesheet_api = useTimesheetApi();
+    const timesheet_store = useTimesheetStore();
 
     const mobile_animation_direction = ref('fadeInLeft');
     const currentDayComponent = ref<HTMLElement[] | null>(null);
     const currentDayComponentWatcher = ref(currentDayComponent);
     const employeeEmail = inject<string>('employeeEmail');
 
+    // ========== computed ========================================
+
     const animation_style = computed(() => ui_store.is_mobile_mode ? mobile_animation_direction.value : 'fadeInDown');
 
+    // ========== methods ========================================
+
     const addNewShift = (day_shifts: Shift[], date: string, timesheet_id: number) => {
         ui_store.focus_next_component = true;
         const new_shift = new Shift;
@@ -89,12 +96,12 @@
 <template>
     <div
         class="fit"
-        :class="$q.platform.is.mobile ? 'column' : 'row'"
+        :class="$q.platform.is.mobile ? 'column no-wrap q-pb-lg' : 'row'"
     >
         <div
             v-for="timesheet, timesheet_index of timesheet_store.timesheets"
             :key="timesheet.timesheet_id"
-            class="col column fit items-center"
+            :class="$q.platform.is.mobile ? 'col-auto column no-wrap' : 'col column fit items-center'"
         >
             <transition
                 appear
@@ -141,13 +148,12 @@
                     <!-- mobile version in portrait mode -->
                     <div
                         v-if="$q.platform.is.mobile && ($q.screen.width < $q.screen.height)"
-                        class="col column full-width q-px-md q-py-sm"
+                        class="col-auto full-width q-px-md q-py-sm"
                     >
                         <q-card
                             class="shadow-12"
                             :class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent rounded-10' : 'bg-dark mobile-rounded-10'"
                         >
-
                             <q-card-section
                                 class="text-weight-bolder text-uppercase text-h6 q-py-sm text-center relative-position"
                                 :class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent text-white' : 'bg-primary text-white'"
diff --git a/src/modules/timesheets/components/timesheet-wrapper.vue b/src/modules/timesheets/components/timesheet-wrapper.vue
index 5f89cd5..a9a8f67 100644
--- a/src/modules/timesheets/components/timesheet-wrapper.vue
+++ b/src/modules/timesheets/components/timesheet-wrapper.vue
@@ -77,7 +77,7 @@
 </script>
 
 <template>
-    <div class="column items-center full-height relative-position no-wrap">
+    <div class="column items-center full-height" :class="mode === 'normal' ? 'relative-position' : ' no-wrap'">
         <LoadingOverlay v-model="timesheet_store.is_loading" />
 
         <!-- label for approval mode to delimit that this is the timesheet -->
@@ -104,7 +104,7 @@
                 />
             </div>
 
-            <q-space />
+            <q-space v-if="!$q.platform.is.mobile" />
 
             <!-- employee weekly overview -->
             <div
@@ -120,12 +120,12 @@
 
         <!-- top menu -->
         <div
+            v-if="mode === 'normal'"
             class="col-auto row items-center full-width"
             :class="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? 'justify-between q-px-md' : 'q-pb-sm q-px-xl'"
         >
             <!-- navigation btn -->
             <PayPeriodNavigator
-                v-if="mode === 'normal'"
                 class="col-auto"
                 @date-selected="timesheet_api.getTimesheetsByDate"
                 @pressed-previous-button="timesheet_api.getTimesheetsByCurrentPayPeriod"
@@ -134,7 +134,7 @@
 
             <!-- mobile expenses button -->
             <div
-                v-if="($q.platform.is.mobile && ($q.screen.width < $q.screen.height))"
+                v-if="$q.screen.width < $q.screen.height && mode === 'normal'"
                 class="col q-pl-lg"
             >
                 <q-btn
@@ -190,7 +190,8 @@
         <!-- full shift list for timesheet approval details dialog -->
         <div
             v-else
-            class="col-auto column full-width"
+            class="col-auto column"
+            :class="$q.platform.is.mobile ? 'fit no-wrap' : 'full-width'"
             :style="$q.platform.is.mobile && $q.screen.width < $q.screen.height ? 'margin-bottom: 40px' : ''"
         >
             <!-- Show if no timesheets found (further than one month from present) -->
@@ -211,7 +212,10 @@
             </div>
 
             <!-- Else show timesheets if found -->
-            <ShiftList class="col" />
+            <ShiftList
+                v-else
+                class="col-auto"
+            />
         </div>
 
         <q-btn
@@ -222,8 +226,8 @@
             color="accent"
             icon="upload"
             :label="$t('shared.label.save')"
-            class="col-auto absolute-bottom shadow-up-10"
-            style="height: 50px;"
+            class="absolute-bottom shadow-up-10"
+            style="height: 40px;"
             @click="onClickSaveTimesheets"
         />
 

From f8d88de03ecc08a9da41be45b7fa25ef1a1e3b38 Mon Sep 17 00:00:00 2001
From: Nic D <n_drolet@hotmail.ca>
Date: Wed, 4 Feb 2026 11:05:32 -0500
Subject: [PATCH 2/2] fix(timesheet): minor behavior change to mobile expense
 items

---
 .../components/mobile/expense-dialog-form-mobile.vue  | 11 ++++++++++-
 .../mobile/expense-dialog-list-item-mobile.vue        |  5 ++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue b/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue
index 71ab477..5dea2bd 100644
--- a/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue
+++ b/src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue
@@ -21,6 +21,10 @@
         employeeEmail?: string;
     }>();
 
+    const emit = defineEmits<{
+        onUpdateClicked: [void];
+    }>();
+
     const { t } = useI18n();
     const ui_store = useUiStore();
     const timesheet_store = useTimesheetStore();
@@ -52,7 +56,12 @@
 
     const requestExpenseCreationOrUpdate = async () => {
         if (file.value)
-            await expenses_api.upsertExpense(expenses_store.current_expense, file.value, employeeEmail ?? auth_store.user?.email ?? 'MISSING_EMAIL');
+            await expenses_api.upsertExpense(
+                expenses_store.current_expense, 
+                file.value, employeeEmail ?? auth_store.user?.email ?? 'MISSING_EMAIL'
+            );
+            
+            emit('onUpdateClicked');
     };
 
     onMounted(() => {
diff --git a/src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue b/src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue
index 864018c..b663748 100644
--- a/src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue
+++ b/src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue
@@ -174,7 +174,10 @@
             </template>
 
             <div class="q-px-sm">
-                <ExpenseDialogFormMobile v-model="expense" />
+                <ExpenseDialogFormMobile
+                    v-model="expense"
+                    @on-update-clicked="is_showing_update_form = false"
+                />
             </div>
         </q-expansion-item>
     </div>