From f4f67656ad8c0f33ac3a73d7770d34e9d8c78b93 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Mon, 15 Jul 2024 11:07:42 +0200
Subject: [PATCH] chg: [front] Improved UI for small screens

---
 src/App.vue                  | 4 ++--
 src/components/TheScores.vue | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 250f925..7ca7f2a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -43,8 +43,8 @@ body {
   @apply 3xl:container mx-auto;
   @apply mx-auto;
   @apply mt-4;
-  @apply 3xl:w-11/12;
-  @apply lg:w-5/6;
+  @apply lg:w-11/12;
+  @apply 3xl:w-5/6;
 }
 
 </style>
\ No newline at end of file
diff --git a/src/components/TheScores.vue b/src/components/TheScores.vue
index f292f58..5b7379f 100644
--- a/src/components/TheScores.vue
+++ b/src/components/TheScores.vue
@@ -38,13 +38,14 @@
     v-for="(exercise, exercise_index) in exercises"
     :key="exercise.name"
   >
-    <div :class="fullscreen_panel === false ? 'relative' : ''">
+    <div :class="fullscreen_panel === false ? 'relative min-w-fit' : ''">
       <span
         v-show="fullscreen_panel === false || fullscreen_panel === exercise_index"
         :class="['inline-block absolute shadow-lg z-50', fullscreen_panel === false ? 'top-0 -right-7' : 'top-2 right-2']"
       >
         <button
           @click="toggleFullScreen(exercise_index)"
+          title="Toggle fullscreen mode"
           :class="`
             w-7 p-1 focus-outline font-semibold
             text-slate-800 bg-slate-100  hover:bg-slate-200  dark:text-slate-200 dark:bg-slate-800  dark:hover:bg-slate-900