From a1c5f30393fa90e4283bc7a245a89f1b2e7e04ce Mon Sep 17 00:00:00 2001
From: survellow <59056368+survellow@users.noreply.github.com>
Date: Mon, 7 Apr 2025 19:52:52 +0200
Subject: [PATCH] fix:#72 commit hash responsive design

---
 frontend/src/components/Footer.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
index 4620ded..a4e0c41 100644
--- a/frontend/src/components/Footer.vue
+++ b/frontend/src/components/Footer.vue
@@ -17,10 +17,11 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed, inject, Ref, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import OverlayPanel from "primevue/overlaypanel";
 const { t } = useI18n({ useScope: "global" });
+const mobilePage = inject("mobilePage") as Ref<boolean>;
 
 const commit = computed(() => ([
   {
@@ -48,8 +49,8 @@ const commitOverlay = ref<OverlayPanel | null>(null);
           @click="commitOverlay?.toggle($event)"
           >
         </Button>
-        <OverlayPanel class="overlay-panel" ref="commitOverlay" :showCloseIcon="true" :dismissable="true">
-          <div class="flex flex-column w-25rem">
+        <OverlayPanel class="overlay-panel" ref="commitOverlay" :showCloseIcon="!mobilePage" :dismissable="true">
+          <div class="flex flex-column" :class="mobilePage ? 'w-full' : 'w-25rem'">
             <b>{{ t('footer.commitInfo.title') }}</b>
             <p>{{ t('footer.commitInfo.description') }}</p>
             <DataTable
@@ -57,6 +58,7 @@ const commitOverlay = ref<OverlayPanel | null>(null);
               :value="commit"
               :paginator="false"
               :rows="commit.length"
+              :size="mobilePage ? 'small' : 'large'"
               class="w-full"
             >
               <Column field="name" :header="t('footer.commitInfo.component')" />