adaptacion al telefono

resources/css/app.css

@@ -3,6 +3,11 @@
 
 body {
     font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    overflow-x: hidden;
+}
+
+.offcanvas {
+    max-width: 100vw;
 }
 
 .task-description-editor {
@@ -74,6 +79,16 @@ .priority-option-low {
     --priority-active-text: #fff;
 }
 
+@media (max-width: 575.98px) {
+    .offcanvas.offcanvas-end {
+        width: 100vw;
+    }
+
+    .priority-picker {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
 @media (max-width: 480px) {
     .priority-picker {
         grid-template-columns: repeat(2, minmax(0, 1fr));

resources/js/Components/Dropdown.vue

@@ -34,10 +34,14 @@ const open = ref(false);
             <slot name="trigger" />
         </div>
 
-        <div v-show="open" class="dropdown-menu show position-absolute mt-2" :class="align === 'left' ? 'start-0' : 'end-0'" style="display: none" @click="open = false">
+        <div
-            <div :class="contentClasses">
+            v-show="open"
-                <slot name="content" />
+            class="dropdown-menu show position-absolute mt-2 shadow-sm"
-            </div>
+            :class="[align === 'left' ? 'start-0' : 'end-0', contentClasses]"
+            style="display: none; z-index: 1050;"
+            @click="open = false"
+        >
+            <slot name="content" />
         </div>
     </div>
 </template>

resources/js/Layouts/AuthenticatedLayout.vue

@@ -29,6 +29,15 @@ const showingNavigationDropdown = ref(false);
                     </div>
 
                     <div class="ms-auto d-flex align-items-center gap-2">
+                        <button
+                            type="button"
+                            class="btn btn-outline-secondary btn-sm d-lg-none"
+                            @click="showingNavigationDropdown = !showingNavigationDropdown"
+                            aria-label="Abrir menú"
+                        >
+                            <i class="bi bi-list fs-5"></i>
+                        </button>
+
                         <Dropdown align="right" width="48">
                             <template #trigger>
                                 <button type="button" class="btn btn-outline-secondary btn-sm">
@@ -43,6 +52,17 @@ const showingNavigationDropdown = ref(false);
                         </Dropdown>
                     </div>
                 </div>
+
+                <div v-show="showingNavigationDropdown" class="d-lg-none w-100 border-top bg-white">
+                    <div class="container py-2 d-flex flex-column gap-2">
+                        <ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
+                            Dashboard
+                        </ResponsiveNavLink>
+                        <ResponsiveNavLink :href="route('projects.index')" :active="route().current('projects.index')">
+                            Projects
+                        </ResponsiveNavLink>
+                    </div>
+                </div>
             </nav>
 
             <header class="bg-white border-bottom" v-if="$slots.header">

resources/js/Pages/Projects/Show.vue

@@ -362,7 +362,7 @@ function formatDescription(command) {
              </div>
 
             <div class="row g-3">
-                <div v-for="col in columns" :key="col.key" class="col-md-3">
+                <div v-for="col in columns" :key="col.key" class="col-12 col-md-6 col-xl-3">
                     <div class="card h-100 shadow-sm">
                         <div class="card-body">
                             <h3 class="h5 mb-3">{{ col.label }}</h3>
@@ -406,7 +406,7 @@ function formatDescription(command) {
                 </div>
             </div>
 
-            <div v-if="openTask" class="offcanvas offcanvas-end w-50 show" tabindex="-1" aria-hidden="false" @click.self="openTask = null">
+            <div v-if="openTask" class="offcanvas offcanvas-end show" tabindex="-1" aria-hidden="false" @click.self="openTask = null" style="--bs-offcanvas-width: min(100vw, 32rem);">
                 <div class="offcanvas-header">
                     <input
                         v-if="isEditingTaskTitle"