fix toolbar on mobile

resources/js/views/dashboard/AnalyticsList.vue

@@ -6,11 +6,12 @@
             :back-link="{ name: 'dashboard' }"
             back-title="Return to Dashboard" />
         <div class="max-w-7xl mx-auto mt-8 px-4">
-            <div class="flex items-center flex-justify-between mb-8">
+            <div
+                class="flex flex-col md:flex-row gap-4 items-center flex-justify-between mb-4">
                 <SMInput
                     v-model="itemSearch"
                     label="Search"
-                    class="max-w-xl ml-4"
+                    class="max-w-xl"
                     @keyup.enter="handleSearch">
                     <template #append>
                         <button
@@ -186,7 +187,7 @@ const handleView = (item: Session) => {
         params: { id: item.id },
         query: {
             return: encodeURIComponent(
-                window.location.pathname + window.location.search
+                window.location.pathname + window.location.search,
             ),
         },
     });

resources/js/views/dashboard/ArticleList.vue

@@ -6,17 +6,18 @@
             :back-link="{ name: 'dashboard' }"
             back-title="Return to Dashboard" />
         <div class="max-w-7xl mx-auto mt-8 px-4">
-            <div class="flex items-center flex-justify-between mb-8">
+            <div
+                class="flex flex-col md:flex-row gap-4 items-center flex-justify-between mb-4">
                 <router-link
                     role="button"
                     :to="{ name: 'dashboard-article-create' }"
-                    class="font-medium px-6 py-3.1 rounded-md hover:shadow-md transition bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
+                    class="font-medium w-full md:w-auto text-center px-6 py-3.1 rounded-md hover:shadow-md transition bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
                     >Create Article</router-link
                 >
                 <SMInput
                     v-model="itemSearch"
                     label="Search"
-                    class="max-w-xl ml-4"
+                    class="max-w-xl"
                     @keyup.enter="handleSearch">
                     <template #append>
                         <button
@@ -234,7 +235,7 @@ const handleEdit = (item: Article) => {
         params: { id: item.id },
         query: {
             return: encodeURIComponent(
-                window.location.pathname + window.location.search
+                window.location.pathname + window.location.search,
             ),
         },
     });

resources/js/views/dashboard/EventList.vue

@@ -6,17 +6,18 @@
             :back-link="{ name: 'dashboard' }"
             back-title="Return to Dashboard" />
         <div class="max-w-7xl mx-auto mt-8 p-4">
-            <div class="flex items-center flex-justify-between mb-8">
+            <div
+                class="flex flex-col md:flex-row gap-4 items-center flex-justify-between mb-4">
                 <router-link
                     role="button"
                     :to="{ name: 'dashboard-event-create' }"
-                    class="font-medium px-6 py-3.1 rounded-md hover:shadow-md transition bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
+                    class="font-medium w-full md:w-auto text-center px-6 py-3.1 rounded-md hover:shadow-md transition bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
                     >Create Event</router-link
                 >
                 <SMInput
                     v-model="itemSearch"
                     label="Search"
-                    class="max-w-xl ml-4"
+                    class="max-w-xl"
                     @keyup.enter="handleSearch">
                     <template #append>
                         <button
@@ -274,7 +275,7 @@ const handleView = (item: Event): void => {
     //  router.push({ name: "event", params: { id: item.id } });
     window.open(
         router.resolve({ name: "event", params: { id: item.id } }).href,
-        "_blank"
+        "_blank",
     );
 };
 
@@ -315,7 +316,7 @@ const handleEdit = (item: Event) => {
         params: { id: item.id },
         query: {
             return: encodeURIComponent(
-                window.location.pathname + window.location.search
+                window.location.pathname + window.location.search,
             ),
         },
     });

resources/js/views/dashboard/MediaList.vue

@@ -6,17 +6,18 @@
             :back-link="{ name: 'dashboard' }"
             back-title="Return to Dashboard" />
         <div class="max-w-7xl mx-auto mt-8 px-8">
-            <div class="flex items-center flex-justify-between mb-8">
+            <div
+                class="flex flex-col md:flex-row gap-4 items-center flex-justify-between mb-4">
                 <router-link
                     role="button"
                     :to="{ name: 'dashboard-media-create' }"
-                    class="font-medium px-6 py-3.1 rounded-md hover:shadow-md transition bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
+                    class="font-medium w-full md:w-auto text-center px-6 py-3.1 rounded-md hover:shadow-md transition bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
                     >Upload Media</router-link
                 >
                 <SMInput
                     v-model="itemSearch"
                     label="Search"
-                    class="max-w-xl ml-4"
+                    class="max-w-xl"
                     @keyup.enter="handleSearch">
                     <template #append>
                         <button
@@ -245,7 +246,7 @@ const handleLoad = async () => {
             if (
                 Object.prototype.hasOwnProperty.call(
                     itemsSelected.value,
-                    row.id
+                    row.id,
                 ) == false
             ) {
                 itemsSelected.value[row.id] = false;
@@ -287,7 +288,7 @@ const handleEdit = (item: Media) => {
         params: { id: item.id },
         query: {
             return: encodeURIComponent(
-                window.location.pathname + window.location.search
+                window.location.pathname + window.location.search,
             ),
         },
     });
@@ -360,7 +361,7 @@ const handleDeleteSelected = async () => {
         let successCount = 0;
 
         const deleteItems = Object.entries(itemsSelected.value).filter(
-            ([key, value]) => value === true
+            ([key, value]) => value === true,
         );
 
         await Promise.all(
@@ -380,7 +381,7 @@ const handleDeleteSelected = async () => {
                 } catch (error) {
                     errorCount++;
                 }
-            })
+            }),
         );
 
         if (errorCount === 0) {
@@ -421,7 +422,7 @@ const handleEditSelected = async () => {
         params: { id: editItems },
         query: {
             return: encodeURIComponent(
-                window.location.pathname + window.location.search
+                window.location.pathname + window.location.search,
             ),
         },
     });

resources/js/views/dashboard/ShortlinkList.vue

@@ -6,17 +6,18 @@
             :back-link="{ name: 'dashboard' }"
             back-title="Return to Dashboard" />
         <div class="max-w-7xl mx-auto mt-8">
-            <div class="flex items-center flex-justify-between mb-8">
+            <div
+                class="flex flex-col md:flex-row gap-4 items-center flex-justify-between mb-4">
                 <router-link
                     role="button"
                     :to="{ name: 'dashboard-shortlink-create' }"
-                    class="font-medium px-6 py-3.1 rounded-md hover:shadow-md transition bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
+                    class="font-medium w-full md:w-auto text-center px-6 py-3.1 rounded-md hover:shadow-md transition bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
                     >Create Link</router-link
                 >
                 <SMInput
                     v-model="itemSearch"
                     label="Search"
-                    class="max-w-xl ml-4"
+                    class="max-w-xl"
                     @keyup.enter="handleSearch">
                     <template #append>
                         <button
@@ -222,7 +223,7 @@ const handleEdit = (shortlink: Shortlink) => {
         params: { id: shortlink.id },
         query: {
             return: encodeURIComponent(
-                window.location.pathname + window.location.search
+                window.location.pathname + window.location.search,
             ),
         },
     });

resources/js/views/dashboard/UserList.vue

@@ -6,17 +6,18 @@
             :back-link="{ name: 'dashboard' }"
             back-title="Return to Dashboard" />
         <div class="max-w-7xl mx-auto mt-8 px-4">
-            <div class="flex items-center flex-justify-between mb-8">
+            <div
+                class="flex flex-col md:flex-row gap-4 items-center flex-justify-between mb-4">
                 <router-link
                     role="button"
                     :to="{ name: 'dashboard-user-create' }"
-                    class="font-medium px-6 py-3.1 rounded-md hover:shadow-md transition bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
+                    class="font-medium w-full md:w-auto text-center px-6 py-3.1 rounded-md hover:shadow-md transition bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
                     >Create User</router-link
                 >
                 <SMInput
                     v-model="itemSearch"
                     label="Search"
-                    class="max-w-xl ml-4"
+                    class="max-w-xl"
                     @keyup.enter="handleSearch">
                     <template #append>
                         <button
@@ -202,7 +203,7 @@ const handleEdit = (user: User) => {
         params: { id: user.id },
         query: {
             return: encodeURIComponent(
-                window.location.pathname + window.location.search
+                window.location.pathname + window.location.search,
             ),
         },
     });