From 443cfd7615e7fee6941515820c7d8e8e65860379 Mon Sep 17 00:00:00 2001
From: Julien Aldon <julien2.aldon@epitech.eu>
Date: Tue, 13 Jan 2026 17:02:16 +0100
Subject: [PATCH] add front responsiveness for phone

---
 front/src/App.vue                         |  1 -
 front/src/components/PaginationFooter.vue |  3 +-
 front/src/components/SearchHeader.vue     |  2 +-
 front/src/components/TableView.vue        | 22 +++++++++-
 front/src/views/TheBooks.vue              | 52 +++++++++++++++++++----
 5 files changed, 67 insertions(+), 13 deletions(-)

diff --git a/front/src/App.vue b/front/src/App.vue
index 8e6b201..2a80125 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -85,7 +85,6 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 5rem;
 }
 
 .router {
diff --git a/front/src/components/PaginationFooter.vue b/front/src/components/PaginationFooter.vue
index cce87b0..26ddcea 100644
--- a/front/src/components/PaginationFooter.vue
+++ b/front/src/components/PaginationFooter.vue
@@ -26,7 +26,7 @@
 
 .page {
   border: none;
-  padding: 1rem;
+  padding: 0.5rem;
   margin: 0.2rem;
 }
 
@@ -34,6 +34,7 @@ footer {
   display: flex;
   padding: 0.2rem;
   align-items: center;
+  max-width: 100%;
 }
 
 
diff --git a/front/src/components/SearchHeader.vue b/front/src/components/SearchHeader.vue
index 03cd753..61dd0bf 100644
--- a/front/src/components/SearchHeader.vue
+++ b/front/src/components/SearchHeader.vue
@@ -37,7 +37,7 @@ export default {
 
 .search {
   display: flex;
-  min-width: 95%;
+  width: 100vw;
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
diff --git a/front/src/components/TableView.vue b/front/src/components/TableView.vue
index b3c6150..fbd553c 100644
--- a/front/src/components/TableView.vue
+++ b/front/src/components/TableView.vue
@@ -1,7 +1,7 @@
 <template>
 <table>
   <tr>
-    <th v-bind:style="{ 'min-width': this.width }" v-for="head in headings" :key="head">{{ head }}</th>
+    <th v-for="head in headings" :key="head">{{ head }}</th>
   </tr>
   <slot></slot>
 </table>
@@ -19,5 +19,25 @@ export default {
 <style scoped>
 th {
   text-align: left;
+  width: 20%;
+
 }
+
+tr {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+table {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 30em) {
+  tr {
+    width: 100vw;
+  }
+}
+
 </style>
\ No newline at end of file
diff --git a/front/src/views/TheBooks.vue b/front/src/views/TheBooks.vue
index 0bb0d70..ac6fd24 100644
--- a/front/src/views/TheBooks.vue
+++ b/front/src/views/TheBooks.vue
@@ -20,7 +20,7 @@
             </button>
           </form>
           <SearchHeader page="Books" @changeSearch="(s) => {editSearch(s)}"/>
-          <TableView ref="table" :headings="headings" width="15rem">
+          <TableView ref="table" :headings="headings">
             <tr v-for="book in this.$store.getters.getBooks" :key="book">
               <td v-if="editRow === book.biblio_Index">
                 <DropDown
@@ -28,7 +28,7 @@
                   field="Auteur"
                   :inputValue="book.Auteur"
                   @selected="(n) => {formEdit.author = n}"
-                  />
+                />
               </td>
               <td v-else>{{ book.Auteur }}</td>
               <td v-if="editRow === book.biblio_Index">
@@ -37,7 +37,7 @@
                   field="Titre"
                   :inputValue="book.Titre"
                   @selected="(n) => {formEdit.title = n}"
-                  />
+                />
               </td>
               <td v-else>{{ book.Titre }}</td>
               <td v-if="editRow === book.biblio_Index">
@@ -46,7 +46,7 @@
                   field="Editeur"
                   :inputValue="book.Editeur"
                   @selected="(n) => {formEdit.editor = n}"
-                  />
+                />
               </td>
               <td v-else>{{ book.Editeur }}</td>
               <td v-if="editRow === book.biblio_Index">
@@ -55,7 +55,7 @@
                   field="Type"
                   :inputValue="book.Type"
                   @selected="(n) => {formEdit.type = n}"
-                  />
+                />
               </td>
               <td v-else>{{ book.Type }}</td>
               <div class="button-panel">
@@ -87,7 +87,7 @@ export default {
   },
   data() {
     return {
-      headings: ['Author', 'Title', 'Editor', 'Type'],
+      headings: ['Author', 'Title', 'Editor', 'Type', 'Control'],
       editMode: false,
       editRow: undefined,
       addMode: false,
@@ -188,11 +188,45 @@ export default {
 </script>
 <style scoped>
 main {
-  max-width: 60.5vw;
+  width: 80vw
 }
 
-td input {
-  width: 14.5rem;
+header {
+  width: 80vw;
+}
+
+tr {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  width: 80vw;
+  align-items: center;
+
+}
+
+td {
+  width: 20%;
+}
+
+.button-panel {
+  width: 20%;
+  display: flex;
+  flex-direction: flex-end;
+}
+
+@media (max-width: 30em) {
+  main {
+    width: 100vw;
+  }
+
+  tr {
+    width: 100vw;
+  }
+
+  td {
+    overflow-x: hidden;
+    white-space: nowrap
+  }
 }
 
 @keyframes lineInsertedIn {