From 17cefcaa30ad0d03c43c54c2da9692765849477e Mon Sep 17 00:00:00 2001
From: anulax1225 <anulax1225@icloud.com>
Date: Sun, 26 Jan 2025 17:48:05 +0100
Subject: [PATCH] Adaptation mobile

---
 resources/js/Components/ResponsiveNavLink.vue |  2 +-
 resources/js/Layouts/AuthLayout.vue           |  4 +-
 resources/js/Layouts/Layout.vue               | 59 ++++++++++++++++---
 resources/js/Pages/Album/Partials/Show.vue    |  2 +-
 resources/js/Pages/Album/Show.vue             |  8 +--
 resources/js/Pages/Home.vue                   | 12 ++--
 resources/js/Pages/Photo/Index.vue            | 19 ++++--
 resources/js/Pages/Photo/Partials/Panel.vue   |  4 +-
 .../js/Pages/Photo/Partials/PanelDisplay.vue  | 12 ++--
 resources/js/Pages/Profile/Edit.vue           | 10 ++--
 .../Partials/UpdateProfileInformationForm.vue |  6 +-
 11 files changed, 95 insertions(+), 43 deletions(-)

diff --git a/resources/js/Components/ResponsiveNavLink.vue b/resources/js/Components/ResponsiveNavLink.vue
index f6c4566..41ec0db 100644
--- a/resources/js/Components/ResponsiveNavLink.vue
+++ b/resources/js/Components/ResponsiveNavLink.vue
@@ -14,7 +14,7 @@ const props = defineProps({
 
 const classes = computed(() =>
     props.active
-        ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 text-start text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
+        ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-gray-400 text-start text-base font-medium text-gray-700 bg-gray-50 focus:outline-none focus:text-gray-800 focus:bg-gray-100 focus:border-gray-700 transition duration-150 ease-in-out'
         : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out',
 );
 </script>
diff --git a/resources/js/Layouts/AuthLayout.vue b/resources/js/Layouts/AuthLayout.vue
index 1b209cb..cb8b86a 100644
--- a/resources/js/Layouts/AuthLayout.vue
+++ b/resources/js/Layouts/AuthLayout.vue
@@ -5,7 +5,7 @@ import { Link } from '@inertiajs/vue3';
 
 <template>
     <div
-        class="flex min-h-screen flex-col items-center bg-gray-100 pt-6 sm:justify-center sm:pt-0"
+        class="flex min-h-screen flex-col items-center bg-gray-100 pt-6 laptop:justify-center sm:pt-0"
     >
         <div>
             <Link href="/">
@@ -14,7 +14,7 @@ import { Link } from '@inertiajs/vue3';
         </div>
 
         <div
-            class="mt-6 w-full overflow-hidden bg-white px-6 py-4 shadow-md sm:max-w-md sm:rounded-lg"
+            class="mt-6 w-full overflow-hidden bg-white px-6 py-4 shadow-md laptop:max-w-md laptop:rounded-lg"
         >
             <slot />
         </div>
diff --git a/resources/js/Layouts/Layout.vue b/resources/js/Layouts/Layout.vue
index 3a101b4..e57e757 100644
--- a/resources/js/Layouts/Layout.vue
+++ b/resources/js/Layouts/Layout.vue
@@ -4,6 +4,7 @@ import NavLink from '@/Components/NavLink.vue';
 import Dropdown from '@/Components/Dropdown.vue';
 import DropdownLink from '@/Components/DropdownLink.vue';
 import { useSlots } from 'vue';
+import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
 const slots = useSlots();
 const pic = usePage().props.user ? usePage().props.user.pic : "";
 usePage().props.user, usePage().props;
@@ -15,10 +16,10 @@ const toggleMenu = () => {
 </script>
 
 <template>
-    <nav class="sticky w-full z-30 top-0 right-0 left-0">
-        <div class="w-full h-16 flex desktop:px-[17.5%] laptop:px-[12.5%] px-2  justify-between border-b border-gray-300 bg-gray-100 text-gray-900">
+    <nav class="sticky z-20 w-full top-0 right-0 left-0">
+        <div class="w-full h-16 z-40 flex desktop:px-[17.5%] laptop:px-[12.5%] px-2  justify-between border-b border-gray-300 bg-gray-100 text-gray-900">
             <div :class="{ 'w-full': !user }" class="flex h-full justify-between">
-                <Link :href="user ? route('photo.index') : route('home')" :class="'h-full mr-5 w-fit'">
+                <Link :href="user ? route('photo.index') : route('home')" :class="'h-full mr-5 z-40 w-fit'">
                     <img src="/img/logo.png" class="h-full laptop:py-1.5 py-3">
                 </Link>
                 <div class="laptop:flex hidden text-black/80">
@@ -69,16 +70,60 @@ const toggleMenu = () => {
                     </template>
                 </Dropdown>
             </div>
-            <div class="h-full flex items-center">
+            <div class="laptop:hidden h-full z-40 flex items-center">
                 <button @click="toggleMenu"><img src="/icons/menu.svg" class="h-10"></button>
             </div>
         </div>
-        <div v-if="slots.header" class="w-full max-h-[3.5rem] desktop:px-[17.5%] laptop:px-[12.5%] px-2  py-auto bg-gray-50 border-b border-gray-300 text-gray-900">
+        <div v-if="slots.header" class="w-full z-20 max-h-[3.5rem] desktop:px-[17.5%] laptop:px-[12.5%]  py-auto bg-gray-50 border-b border-gray-300 text-gray-900">
             <slot name="header"/>
         </div>
     </nav>
-    <div id="menu-content" class="laptop:hidden hidden fixed z-10 top-0 bottom-0 right-0 left-0 bg-gray-100">
-        
+    <div id="menu-content" class="laptop:hidden hidden fixed z-30 top-0 bottom-0 right-0 left-0 bg-gray-100 mt-[64px] overflow-y-auto">
+        <div class="z-10 flex flex-col border-b border-gray-200">
+            <ResponsiveNavLink v-if="!user" :href="route('home')" :active="route().current('home')">
+                Home
+            </ResponsiveNavLink>
+            <!-- <NavLink v-if="!user" :href="'#'" :active="false">
+                Posts
+            </NavLink>
+            <NavLink v-if="!user" :href="route('info')" :active="route().current('info')">
+                Infos
+            </NavLink>
+            <NavLink v-if="!user" :href="'#'" :active="false">
+                News letter
+            </NavLink> -->
+            <ResponsiveNavLink v-if="!user" :href="route('login')" :active="route().current('login')">
+                Log in
+            </ResponsiveNavLink>
+            <ResponsiveNavLink v-if="user" :href="route('photo.index')" :active="route().current('photo.*')">
+                Photothèque
+            </ResponsiveNavLink>
+            <ResponsiveNavLink v-if="user" :href="route('album.index')" :active="route().current('album.*')">
+                Albums
+            </ResponsiveNavLink>
+            <ResponsiveNavLink v-if="user" :href="route('admin.user.index')" :active="route().current('admin.*')">
+                Admin
+            </ResponsiveNavLink>
+        </div>
+        <div v-if="user" class="z-10 flex flex-col border-b border-gray-200">
+            <span class="w-full flex rounded-md hover:cursor-pointer focus:cursor-pointer">
+                <button type="button" class="w-full flex items-center justify-between px-3 py-2 border border-transparent text-sm leading-4 
+                    font-medium rounded-md text-black/80 hover:text-gray-700 
+                    dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
+                    <p class="mr-2">{{ user.name }}</p>
+
+                    <div class="w-10 overflow-hidden rounded-full bg-black/80 flex justify-center items-center">
+                        <img :src="pic" class="h-10" :class="{ 'invert': user.path === 'profiles/none.svg' }">
+                    </div>
+                </button>
+            </span>
+            <ResponsiveNavLink v-if="user" :href="route('profile.edit')" :active="route().current('profile.edit')">
+                Profile
+            </ResponsiveNavLink>
+            <ResponsiveNavLink v-if="user" :href="route('logout')">
+                Log Out
+            </ResponsiveNavLink>
+        </div>
     </div>
     <slot name="content"/>
     <footer class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-2  bg-gray-50 text-gray-900 flex items-center justify-between">
diff --git a/resources/js/Pages/Album/Partials/Show.vue b/resources/js/Pages/Album/Partials/Show.vue
index d8a7049..34b7a7a 100644
--- a/resources/js/Pages/Album/Partials/Show.vue
+++ b/resources/js/Pages/Album/Partials/Show.vue
@@ -46,7 +46,7 @@ const deletePhoto = async () => {
     <Link :href="'/album/' + props.album.uuid" :class="{ 
         'border-r': (props.index + 1) % props.columns  != 0, 
         'border-b': props.index < props.length - props.columns, 
-        'h-96': props.columns === 3,
+        'laptop:h-96 h-44': props.columns === 3,
         'h-[25rem]': props.columns !== 3, 
     }" 
     class="group relative w-full overflow-hidden border-white hover:scale-[1.003] flex items-center bg-black/90">
diff --git a/resources/js/Pages/Album/Show.vue b/resources/js/Pages/Album/Show.vue
index c27f917..e1f7a13 100644
--- a/resources/js/Pages/Album/Show.vue
+++ b/resources/js/Pages/Album/Show.vue
@@ -104,7 +104,8 @@ const toggle = () => {
                     <p @click="toggle"
                     class="font-semibold laptop:mr-4 mr-1 laptop:text-lg text-sm laptop:hidden">Affichage</p>
                     <div id="affichage" class="absolute laptop:static hidden top-full mt-1 laptop:flex laptop:flex-row flex-col items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden">
-                        <button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full laptop:border-r laptop:border-b-0 border-b border-gray-400 p-1
+                        <button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full 
+                        laptop:border-r laptop:border-b-0 border-b border-gray-400 p-1
                         hover:bg-black/5">
                             <img src="/icons/block-content.svg" class="h-7">
                         </button>
@@ -119,13 +120,12 @@ const toggle = () => {
                     </div>
                 </div>
                 <div class="relative flex items-center">
-                    
-                    <button @click="create.active = !create.active" class="flex items-center hover:bg-black/10 rounded-md px-2 py-1">
+                    <button @click="create.active = !create.active" class="flex items-center hover:bg-black/10 rounded-md laptop:px-2 py-1">
                         <p class="font-medium laptop:mr-4 mr-1 laptop:text-lg text-sm">Ajouter une photo</p>
                         <img src="/icons/add.svg" class="h-8">
                     </button>
                     <Panel @data="(uuids) => addPhotos(uuids)" @close="create.active = !create.active" v-if="create.active" :album="props.album"
-                    class="absolute laptop:-right-0 top-[110%] z-10 mt-4" />
+                    class="absolute right-0 top-[110%] z-10 mt-4 " />
                 </div>
             </div>
         </template>
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index c3c8066..2a2d55c 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -8,13 +8,13 @@ import Layout from '@/Layouts/Layout.vue';
     <Head title="Home"/>
     <Layout>
         <template #content>
-            <div class="relative w-full h-96 flex items-center overflow-hidden">
-                <img src="/img/sarasin.png" class="w-full pb-96">
-                <p class="text-center absolute text-white/65 text-[180px] leading-[180px] font-bold left-0 right-0">Scout Baslac</p>
+            <div class="relative w-full laptop:h-96 flex items-center overflow-hidden max-h-96">
+                <img src="/img/sarasin.png" class="w-full laptop:pb-96">
+                <p class="text-center absolute text-white/65 laptop:text-[180px] text-8xl laptop:leading-[180px] font-bold left-0 right-0">Scout Baslac</p>
             </div>
             <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-2  flex flex-col">
                 <div class="my-5">
-                    <p class="w-full text-5xl border-b border-gray-300 pb-2 mb-2 font-semibold">Qui sommes-nous?</p>
+                    <p class="w-full laptop:text-5xl text-3xl border-b border-gray-300 pb-2 mb-2 font-semibold">Qui sommes-nous?</p>
                     <p class="mb-2">
                         Le Groupement scout du Bas-Lac existe depuis bientôt trente ans mais repose sur une tradition depuis 1920 sur Saint-Blaise. 
                         La base du scoutisme est la relation avec la nature (respect de l’environnement, reconnaissance de la faune et de la flore, construction de cabanes ou abris, 
@@ -44,7 +44,7 @@ import Layout from '@/Layouts/Layout.vue';
                     </p>
                 </div>
                 <div class="my-5">
-                    <p class="w-full text-5xl border-b border-gray-300 pb-2 mb-2 font-semibold">Nos groupes par âge</p>
+                    <p class="w-full laptop:text-5xl text-3xl border-b border-gray-300 pb-2 mb-2 font-semibold">Nos groupes par âge</p>
                     <p class="mb-2">Notre groupe est divisé par tranche d'âge allant de 7 à 25 ans pour les participants</p>
                     <ul class="list-disc px-6">
                         <li class="mb-2">
@@ -88,7 +88,7 @@ import Layout from '@/Layouts/Layout.vue';
                     </ul> 
                 </div>
                 <div class="my-5">
-                    <p class="w-full text-5xl border-b border-gray-300 pb-2 mb-2 font-semibold">Information pratique</p>
+                    <p class="w-full laptop:text-5xl text-3xl border-b border-gray-300 pb-2 mb-2 font-semibold">Information pratique</p>
                     <p class="mb-2">Voici les informations principal pour s'engager.</p>
                     <ul class="list-disc px-6">
                         <li class="mb-2">
diff --git a/resources/js/Pages/Photo/Index.vue b/resources/js/Pages/Photo/Index.vue
index 9bc7a6a..1b82756 100644
--- a/resources/js/Pages/Photo/Index.vue
+++ b/resources/js/Pages/Photo/Index.vue
@@ -67,6 +67,11 @@ const deletePhoto = (uuid) => {
         });
     }
 }
+
+const toggle = () => {
+    document.querySelector('#affichage').classList.toggle('hidden');
+    document.querySelector('#affichage').classList.toggle('flex');
+}
 </script>
 
 <template>
@@ -75,13 +80,15 @@ const deletePhoto = (uuid) => {
         <template #header>
             <div class="w-full flex justify-between items-center py-1">
                 <div class="relative flex items-center">
-                    <p class="font-semibold mr-4">Affichage</p>
-                    <div class="flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden">
-                        <button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full border-r border-gray-400 p-1
+                    <p class="font-semibold laptop:mr-4 mr-1 laptop:text-lg text-sm hidden laptop:block">Affichage</p>
+                    <p @click="toggle"
+                    class="font-semibold laptop:mr-4 mr-1 laptop:text-lg text-sm laptop:hidden">Affichage</p>
+                    <div id="affichage" class="absolute laptop:static hidden top-full mt-1 laptop:flex laptop:flex-row flex-col items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden">
+                        <button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full laptop:border-r laptop:border-b-0  border-b border-gray-400 p-1
                         hover:bg-black/5">
                             <img src="/icons/block-content.svg" class="h-7">
                         </button>
-                        <button @click="listView" :class="{'bg-black/5': photoState.list}" class="flex items-center h-full border-r border-gray-400 p-1
+                        <button @click="listView" :class="{'bg-black/5': photoState.list}" class="flex items-center h-full laptop:border-r laptop:border-b-0  border-b border-gray-400 p-1
                         hover:bg-black/5">
                             <img src="/icons/list.svg" class="h-7">
                         </button>
@@ -94,10 +101,10 @@ const deletePhoto = (uuid) => {
                 <div class="relative flex items-center">
                     
                     <button @click="create.active = !create.active" class="flex items-center hover:bg-black/10 rounded-md px-2 py-1">
-                        <p class="font-medium mr-4">Ajouter une photo</p>
+                        <p class="font-medium laptop:mr-4 mr-1 laptop:text-lg text-sm">Ajouter une photo</p>
                         <img src="/icons/add.svg" class="h-8">
                     </button>
-                    <Create @close="create.active = !create.active" v-if="create.active" class="absolute -right-0 top-[110%] z-10 mt-4" />
+                    <Create @close="create.active = !create.active" v-if="create.active" class="absolute right-0 top-[110%] z-10 mt-4" />
                 </div>
             </div>
         </template>
diff --git a/resources/js/Pages/Photo/Partials/Panel.vue b/resources/js/Pages/Photo/Partials/Panel.vue
index 0219f7d..8310756 100644
--- a/resources/js/Pages/Photo/Partials/Panel.vue
+++ b/resources/js/Pages/Photo/Partials/Panel.vue
@@ -38,11 +38,11 @@ uuids();
 
 <template>
     <div class="text-left text-black shadow-3xl shadow-gray-900 rounded-lg bg-gray-100 overflow-y-auto
-    border border-gray-500" :class="{ 'w-[30rem] max-h-[calc(100vh/2)]': !panelState.toggle, 'w-[60rem] h-[40rem]': panelState.toggle, }">
+    border border-gray-500" :class="{ 'laptop:w-[30rem] w-screen max-h-[calc(100vh/2)]': !panelState.toggle, 'laptop:w-[60rem] w-screen laptop:h-[40rem] laptop:pb-0 pb-32 h-screen': panelState.toggle, }">
         <div v-if="imageState.url && !panelState.toggle" class="max-h-72 overflow-hidden flex items-center">
             <img  :src="imageState.url">
         </div>
-        <div class="px-10 pb-5 pt-5">
+        <div class="laptop:px-10 px-2 pb-5 pt-5">
             <div  class="w-full flex justify-between mb-5 items-center">
                 <select @change="panelState.toggle = !panelState.toggle" class="bg-gray-200 border-none rounded shadow">
                     <option>Photo Existante</option>
diff --git a/resources/js/Pages/Photo/Partials/PanelDisplay.vue b/resources/js/Pages/Photo/Partials/PanelDisplay.vue
index 663147b..5995009 100644
--- a/resources/js/Pages/Photo/Partials/PanelDisplay.vue
+++ b/resources/js/Pages/Photo/Partials/PanelDisplay.vue
@@ -46,24 +46,24 @@ initLoad();
 </script>
 
 <template>
-<div class="flex pb-10 h-[35rem]">
+<div class="flex pb-10 laptop:h-[35rem] h-full overflow-y-auto">
     <div class="flex flex-col items-start justify-between w-32 border-r border-gray-200 pr-2">
         <div class="w-full">
             <p class="px-1 mb-4 py-1 border-b border-gray-200 text-gray-400 font-semibold">Les albums</p>
-            <p class="mb-4 py-1 px-2  text-gray-700 rounded shadow"
+            <p class="mb-4 py-1 laptop:px-2 pl-1  text-gray-700 rounded shadow laptop:text-lg text-sm"
             @click="loadAlbum('')"
             :class="{ 'bg-gray-200': albumState.focusAlbum === '', 'bg-gray-100': albumState.focusAlbum !== ''}">Photothèque</p>
             <p v-for="album in albumState.albums" 
             @click="loadAlbum(album.uuid)"
-            class="mb-2 py-1 px-2 bg-gray-100 text-gray-700 
+            class="mb-2 py-1 laptop:px-2 pl-1 bg-gray-100 text-gray-700 laptop:text-lg text-sm
             overflow-hidden text-nowrap rounded shadow" 
             :class="{ 'bg-gray-200': albumState.focusAlbum === album.uuid, 'bg-gray-100': albumState.focusAlbum !== album.uuid}">{{ album.name }}</p>
-            <p class="my-1 py-1 px-2 bg-gray-100 text-gray-700  rounded shadow">plus d'album</p>
+            <p class="hidden my-1 py-1 laptop:px-2 pl-1 bg-gray-100 text-gray-700  rounded shadow laptop:text-lg text-sm">plus d'album</p>
         </div>
         <button @click="emits('data', photos)" class="text-white font-semibold p-1 px-2 bg-primary rounded-md">Ajouter</button>
     </div>
     <div class="w-[calc(100%-8rem)] h-full overflow-y-scroll py-5 ml-2">
-        <div class="grid grid-cols-3">
+        <div class="grid tablet:grid-cols-3">
             <PanelShow v-for="(photo, index) in albumState.photos" v-show="!props.hiddenPhotos.includes(photo.uuid)" :photo="photo"
             :index="index" :length="albumState.photos.length" :columns="3" :active="photos.includes(photo.uuid)"
             @photo-added="(uuid) => { if(!photos.includes(uuid)) photos.push(uuid) }"
@@ -72,7 +72,7 @@ initLoad();
         </div>
         <div v-if="albumState.pageCount < albumState.lastPage" class="py-2 w-full flex justify-center">
             <button @click="loadPhotos(albumState.focusAlbum, ++albumState.pageCount)" class="bg-gray-100 p-2 font-medium text-gray-700 
-            rounded shadow hover:scale-[1.01]">Afficher plus de photos</button>
+            rounded shadow hover:scale-[1.01] laptop:text-lg text-sm">Afficher plus de photos</button>
         </div>
     </div>
 </div>
diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
index 9e048fd..96d4867 100644
--- a/resources/js/Pages/Profile/Edit.vue
+++ b/resources/js/Pages/Profile/Edit.vue
@@ -25,21 +25,21 @@ defineProps({
         </template>
         <template #content>
             <div class="py-12">
-                    <div class="mx-auto max-w-7xl space-y-6 sm:px-6 lg:px-8">
+                    <div class="mx-auto max-w-7xl space-y-6 laptop:px-6 desktop:px-8">
                         <div
-                            class="bg-gray-50 p-4 shadow sm:rounded-lg sm:p-8"
+                            class="bg-gray-50 p-4 shadow laptop:rounded-lg laptop:p-8"
                         >
                             <UpdateProfileInformationForm
                                 :must-verify-email="mustVerifyEmail"
                                 :status="status"
-                                class="pr-64"
+                                class="tablet:pr-64"
                             />
                         </div>
 
                         <div
-                            class="bg-gray-50 p-4 shadow sm:rounded-lg sm:p-8"
+                            class="bg-gray-50 p-4 shadow laptop:rounded-lg laptop:p-8"
                         >
-                            <UpdatePasswordForm class="pr-64" />
+                            <UpdatePasswordForm class="tablet:pr-64" />
                         </div>
                     </div>
                 </div>
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
index 212222d..bf344b7 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -45,8 +45,8 @@ const submit = () => {
 
 <template>
     <section class="">
-        <header :class="{'items-center' : !pic.edit}" class="flex justify-between">
-            <div>
+        <header :class="{'items-center' : !pic.edit}" class="flex tablet:flex-row flex-col-reverse tablet:justify-between justify-center">
+            <div class="tablet:w-fit tablet:mt-0 w-full mt-5">
                 <h2 class="text-xl font-medium text-gray-900">
                     Information Profile 
                 </h2>
@@ -59,7 +59,7 @@ const submit = () => {
                     <img :src="user.pic" class="h-32" :class="{ 'invert': user.path === 'profiles/none.svg' }">
                 </div>
                 <div @click="(e) => { Utils.Prevent(e); pic.edit = true; }" :class="{ 'hidden': !pic.active }" 
-                class="absolute top-full right-0 w-40 mt-1 bg-white text-sm text-black/80 rounded-md shadow-xl overflow-hidden">
+                class="absolute top-full tablet:right-0 w-40 mt-1 bg-white text-sm text-black/80 rounded-md shadow-xl overflow-hidden">
                     <p class="px-3 py-2 hover:bg-gray-100 hover:scale-[1.01]">Changer la photo</p>
                     <p class="px-3 py-2 hover:bg-gray-100 hover:scale-[1.01]" >Retirer la photo</p>
                 </div>