From ec84d3c6b64bb77f3122fef37760066bce350507 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 8 Oct 2026 07:56:11 +0000
Subject: [PATCH] =?UTF-8?q?Images=20de=20l'utilisateur=20:=20touche=20enti?=
 =?UTF-8?q?=C3=A8re,=20plus=20coup=C3=A9e=20en=20bas=20sur=20les=20touches?=
 =?UTF-8?q?=20basses=20(v0.12.15)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Même cause que les visuels 2×2 : la hauteur en % de l'image ne se résolvait pas dans la grille de la
touche, elle gardait sa taille d'origine et était rognée (texte de l'étiquette coupé). Image posée
en absolu, affichée entière (contain).

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KDraD7Wh89smGbwfZiSgGU
---
 package-lock.json   | 4 ++--
 package.json        | 2 +-
 public/css/base.css | 9 ++++++++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 407825c..cee8ba3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "streamsim",
-  "version": "0.12.14",
+  "version": "0.12.15",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "streamsim",
-      "version": "0.12.14",
+      "version": "0.12.15",
       "license": "MIT",
       "dependencies": {
         "electron-updater": "^6.8.9",
diff --git a/package.json b/package.json
index 1741181..e8653c3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "streamsim",
   "productName": "StreamSim",
-  "version": "0.12.14",
+  "version": "0.12.15",
   "description": "Clone logiciel de Stream Deck : serveur PC, application de configuration et client Android.",
   "author": "StreamSim",
   "license": "MIT",
diff --git a/public/css/base.css b/public/css/base.css
index f19875e..47a8a57 100644
--- a/public/css/base.css
+++ b/public/css/base.css
@@ -315,10 +315,16 @@ select optgroup {
   transform: none;
   font-size: 52cqmin;
 }
+/* Image de l'utilisateur (touche entière) : posée en absolu pour remplir exactement la touche. Une hauteur
+   en % ne se résolvait pas dans la grille de la touche : l'image gardait sa taille d'origine et était coupée en
+   bas (texte de l'étiquette) dès que la touche était plus basse que large (téléphone en paysage). Affichée
+   entière (contain), centrée sur la couleur de la touche. */
 .keyface img.kf-icon {
+  position: absolute;
+  inset: 0;
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   transform: none;
   filter: none;
 }
@@ -345,6 +351,7 @@ select optgroup {
 }
 /* Icônes fournies (SVG blancs) : dimensionnées comme un emoji, pas en plein cadre. */
 .keyface img.kf-icon.kf-svg {
+  position: static;
   width: 48cqmin;
   height: 48cqmin;
   object-fit: contain;