improve timetracker on mobile; fix select all checkbox with 0 time

entries; add minimal padding to mobile dialogs

Author: Onatcer

resources/js/Components/ui/dialog/DialogContent.vue

@@ -31,14 +31,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         <div
             :class="
                 cn(
-                    'fixed top-0 left-0 z-50 pointer-events-none w-screen h-screen flex items-start pt-6 md:pt-20 xl:pt-32 justify-center overflow-auto'
+                    'fixed top-0 left-0 z-50 pointer-events-none w-screen h-screen flex items-start px-2 pt-3 md:pt-20 xl:pt-32 justify-center overflow-auto'
                 )
             ">
             <DialogContent
                 v-bind="forwarded"
                 :class="
                     cn(
-                        'pointer-events-auto bg-default-background grid w-full max-w-lg border border-border-tertiary shadow-lg duration-200 sm:rounded-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+                        'pointer-events-auto bg-default-background grid w-full max-w-lg border border-border-tertiary shadow-lg duration-200 rounded-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
                         props.class
                     )
                 ">

resources/js/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue

@@ -69,7 +69,7 @@ const showMassUpdateModal = ref(false);
         ">
         <Checkbox
             id="selectAll"
-            :checked="allSelected"
+            :checked="allSelected && selectedTimeEntries.length > 0"
             @update:checked="allSelected ? emit('unselectAll') : emit('selectAll')">
         </Checkbox>
         <FieldLabel

resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue

@@ -208,17 +208,22 @@ useSelectEvents(
     <div class="flex items-center relative @container" data-testid="dashboard_timer">
         <div
             class="flex flex-col @2xl:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
-            <div class="flex flex-1 items-center pr-6 relative">
+            <div class="flex flex-1 items-center relative">
                 <input
                     ref="currentTimeEntryDescriptionInput"
                     v-model="tempDescription"
                     placeholder="What are you working on?"
                     data-testid="time_entry_description"
-                    class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator @2xl:px-4 text-base @4xl:text-lg text-text-primary bg-transparent border-none placeholder-text-secondary font-medium focus:ring-0 transition"
+                    class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator @2xl:px-4 text-lg text-text-primary bg-transparent border-none placeholder-text-secondary font-medium focus:ring-0 transition"
                     type="text"
                     @keydown.enter="startTimerIfNotActive"
                     @keydown.esc="showDropdown = false"
                     @blur="updateTimeEntryDescription" />
+                <div class="@2xl:hidden pr-3 shrink-0">
+                    <TimeTrackerStartStop
+                        :active="isActive"
+                        @changed="onToggleButtonPress"></TimeTrackerStartStop>
+                </div>
                 <div
                     v-if="showDropdown && filteredRecentlyTrackedTimeEntries.length > 0"
                     ref="floating"
@@ -285,7 +290,7 @@ useSelectEvents(
                 </div>
             </div>
         </div>
-        <div class="pl-4 @2xl:pl-6 pr-3 absolute sm:relative top-[6px] sm:top-0 right-0">
+        <div class="pl-4 @2xl:pl-6 pr-3 hidden @2xl:block">
             <TimeTrackerStartStop
                 :active="isActive"
                 size="large"