From c923bdbf6430368fcf4df98c35af342856aa3201 Mon Sep 17 00:00:00 2001
From: davide3011 <davide.grilli@outlook.com>
Date: Wed, 28 Jan 2026 16:09:36 +0100
Subject: [PATCH] fix(ui): stabilizza header in formazione e cambio servizio
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Riserva spazio fisso per l’icona del servizio per evitare scatti
- Stabilizza la larghezza del punteggio inline in modalità Formazione
- Migliora la coerenza visiva nelle testate home/guest
---
 src/components/HomePage/HomePage.html | 30 +++++++++++++++++++--------
 src/style.css                         | 15 +++++++++++++-
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/components/HomePage/HomePage.html b/src/components/HomePage/HomePage.html
index 7d98b6a..c8bb85e 100644
--- a/src/components/HomePage/HomePage.html
+++ b/src/components/HomePage/HomePage.html
@@ -74,16 +74,22 @@
 <!-- home guest -->
       <div class="hea home">
         <span @click="decPunt('home')" :style="{ 'float': 'left' }">
-          {{ sp.nomi.home }} <img v-if="sp.servHome" src="/serv.png" width="25" />
-          <span v-if="visuForm">{{ sp.punt.home }}</span>
+          {{ sp.nomi.home }}
+          <span class="serv-slot">
+            <img v-show="sp.servHome" src="/serv.png" width="25" />
+          </span>
+          <span v-if="visuForm" class="score-inline">{{ sp.punt.home }}</span>
         </span>
         <span @click="incSet('home')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.home }}</span>
       </div>
 
       <div class="hea guest">
         <span @click="decPunt('guest')" :style="{ 'float': 'right' }">
-          <img v-if="!sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.guest }}
-          <span v-if="visuForm">{{ sp.punt.guest }}</span>
+          <span class="serv-slot">
+            <img v-show="!sp.servHome" src="/serv.png" width="25" />
+          </span>
+          {{ sp.nomi.guest }}
+          <span v-if="visuForm" class="score-inline">{{ sp.punt.guest }}</span>
         </span>
         <span @click="incSet('guest')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.guest }}</span>
       </div>
@@ -113,16 +119,22 @@
 
       <div class="hea guest">
         <span @click="decPunt('guest')" :style="{ 'float': 'left' }">
-          {{ sp.nomi.guest }} <img v-if="!sp.servHome" src="/serv.png" width="25" />
-          <span v-if="visuForm">{{ sp.punt.guest }}</span>
+          {{ sp.nomi.guest }}
+          <span class="serv-slot">
+            <img v-show="!sp.servHome" src="/serv.png" width="25" />
+          </span>
+          <span v-if="visuForm" class="score-inline">{{ sp.punt.guest }}</span>
         </span>
         <span @click="incSet('guest')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.guest }}</span>
       </div>
 
       <div class="hea home">
         <span @click="decPunt('home')" :style="{ 'float': 'right' }">
-          <img v-if="sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.home }}
-          <span v-if="visuForm">{{ sp.punt.home }}</span>
+          <span class="serv-slot">
+            <img v-show="sp.servHome" src="/serv.png" width="25" />
+          </span>
+          {{ sp.nomi.home }}
+          <span v-if="visuForm" class="score-inline">{{ sp.punt.home }}</span>
         </span>
         <span @click="incSet('home')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.home }}</span>
       </div>
@@ -191,4 +203,4 @@
       </div>
     </div>
 </section>
-  
\ No newline at end of file
+  
diff --git a/src/style.css b/src/style.css
index 3e9d912..b061700 100644
--- a/src/style.css
+++ b/src/style.css
@@ -58,6 +58,19 @@ button:focus-visible {
   padding-right: 10px;
   border-radius: 5px;
 }
+.score-inline {
+  display: inline-block;
+  min-width: 3ch;
+  text-align: center;
+}
+.serv-slot {
+  display: inline-flex;
+  width: 25px;
+  height: 25px;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
 .tal {
   text-align: left;
 }
@@ -176,4 +189,4 @@ button:focus-visible {
   width: 100%;
   height: 0;
   margin: 0;
-}
\ No newline at end of file
+}