Keep responsive layouts when the app's stylesheet loads last

module.json

@@ -18,7 +18,7 @@
     "requires": {},
     "schema_version": 2,
     "slug": "tasks-projects",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "license": "AGPL-3.0-only",
     "compatibility": {
         "invoiceshelf": ">=3.0.0-alpha.2 <4.0.0",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoiceshelf/module-tasks-projects",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "private": true,
     "type": "module",
     "packageManager": "pnpm@11.6.0",

resources/js/components/TimerChip.vue

@@ -38,14 +38,14 @@ function stop(): void {
 <template>
   <li v-if="timerStore.running !== null" class="relative float-start m-0 ms-2">
     <div
-      class="flex h-8 items-center gap-2 rounded-lg bg-white/20 px-2 text-sm text-white md:h-9 md:px-3"
+      class="flex items-center gap-2 rounded-lg bg-white/20 text-sm text-white max-md:h-8 max-md:px-2 md:h-9 md:px-3"
       :title="t('tasks_projects.timer.running')"
     >
       <span class="inline-block h-2 w-2 shrink-0 animate-pulse rounded-full bg-white" />
 
       <button
         type="button"
-        class="hidden max-w-32 truncate hover:underline lg:block"
+        class="max-w-32 truncate hover:underline max-lg:hidden lg:block"
         :aria-label="t('tasks_projects.timer.open_task')"
         :title="t('tasks_projects.timer.open_task')"
         @click="emit('open')"

resources/js/pages/ReportsPage.vue

@@ -311,7 +311,7 @@ function clearRange(): void {
           {{ currencyLabel(row.currency_id) }}
         </p>
 
-        <div class="grid grid-cols-2 gap-4 sm:grid-cols-4" :class="showCurrency ? 'mt-3' : ''">
+        <div class="grid gap-4 max-sm:grid-cols-2 sm:grid-cols-4" :class="showCurrency ? 'mt-3' : ''">
           <div>
             <p class="text-xs font-medium tracking-wider text-muted uppercase">
               {{ t('tasks_projects.reports.summary.logged') }}

resources/js/pages/TaskPage.vue

@@ -397,7 +397,7 @@ async function remove(): Promise<void> {
     </div>
 
     <template v-else-if="task">
-      <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div class="mt-6 grid gap-4 max-sm:grid-cols-1 sm:max-lg:grid-cols-2 lg:grid-cols-4">
         <div class="rounded-xl border border-line-default bg-surface p-5">
           <p id="task-status-label" class="text-xs font-medium tracking-wider text-muted uppercase">
             {{ t('tasks_projects.tasks.detail.status') }}

resources/js/pages/UnbilledTimePage.vue

@@ -298,13 +298,17 @@ async function createInvoice(): Promise<void> {
     <InvoiceRetryBanner :client="client" :notify="notify" />
 
     <div class="mt-4 flex flex-wrap items-end gap-4">
-      <BaseInputGroup :label="t('tasks_projects.billing.customer.from')" class="w-full sm:w-48">
-        <BaseDatePicker :model-value="range.from" @update:model-value="onFrom" />
-      </BaseInputGroup>
+      <div class="max-sm:w-full sm:w-48">
+        <BaseInputGroup :label="t('tasks_projects.billing.customer.from')">
+          <BaseDatePicker :model-value="range.from" @update:model-value="onFrom" />
+        </BaseInputGroup>
+      </div>
 
-      <BaseInputGroup :label="t('tasks_projects.billing.customer.to')" class="w-full sm:w-48">
-        <BaseDatePicker :model-value="range.to" @update:model-value="onTo" />
-      </BaseInputGroup>
+      <div class="max-sm:w-full sm:w-48">
+        <BaseInputGroup :label="t('tasks_projects.billing.customer.to')">
+          <BaseDatePicker :model-value="range.to" @update:model-value="onTo" />
+        </BaseInputGroup>
+      </div>
 
       <BaseButton
         v-if="range.from !== '' || range.to !== ''"
@@ -330,7 +334,7 @@ async function createInvoice(): Promise<void> {
 
       <div
         v-if="customers.length > 0"
-        class="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+        class="mt-5 grid gap-4 max-sm:grid-cols-1 sm:max-lg:grid-cols-2 lg:grid-cols-3"
       >
         <button
           v-for="row in customers"
@@ -371,9 +375,11 @@ async function createInvoice(): Promise<void> {
           <p class="mt-1 text-sm text-muted">{{ label(chosen.customer_id) }}</p>
         </div>
 
-        <BaseInputGroup :label="t('tasks_projects.billing.entries.grouping')" class="w-full sm:w-56">
-          <BaseSelectInput v-model="groupingOption" :options="groupingOptions" label-key="label" />
-        </BaseInputGroup>
+        <div class="max-sm:w-full sm:w-56">
+          <BaseInputGroup :label="t('tasks_projects.billing.entries.grouping')">
+            <BaseSelectInput v-model="groupingOption" :options="groupingOptions" label-key="label" />
+          </BaseInputGroup>
+        </div>
       </div>
 
       <div v-if="loadingEntries" class="flex justify-center py-16">

resources/js/pages/project/ProjectMembersTab.vue

@@ -121,7 +121,7 @@ async function detach(member: ProjectMember): Promise<void> {
 <template>
   <div class="py-4">
     <div class="rounded-xl border border-line-default bg-surface p-5">
-      <div class="flex flex-col gap-4 lg:flex-row lg:items-end">
+      <div class="flex gap-4 max-lg:flex-col lg:items-end">
         <BaseInputGroup
           :label="t('tasks_projects.project.members.member')"
           :error="errors.user_id"

resources/js/pages/project/ProjectOverviewTab.vue

@@ -89,7 +89,7 @@ async function invoice(): Promise<void> {
 
 <template>
   <div v-if="project && totals" class="py-6">
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+    <div class="grid gap-4 max-sm:grid-cols-1 sm:max-lg:grid-cols-2 lg:grid-cols-4">
       <div class="rounded-xl border border-line-default bg-surface p-5">
         <p class="text-xs font-medium tracking-wider text-muted uppercase">
           {{ t('tasks_projects.project.overview.tasks') }}