From b64a33d833d30ba9b6dabad1550925c1f1ac5eb8 Mon Sep 17 00:00:00 2001
From: Frank Tovar <mail@franktovar.de>
Date: Wed, 4 Feb 2026 21:19:35 +0100
Subject: [PATCH] More style adjustments

---
 wwwroot/css/components.css | 15 +++++++++++----
 wwwroot/css/layout.css     |  2 --
 wwwroot/index.html         |  4 ++--
 wwwroot/js/ui.js           |  4 ++--
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/wwwroot/css/components.css b/wwwroot/css/components.css
index 6ded783..68d28fb 100644
--- a/wwwroot/css/components.css
+++ b/wwwroot/css/components.css
@@ -41,7 +41,6 @@
     background-position: center;
     background-repeat: no-repeat;
     background-color: #f6b24f;
-    cursor: pointer;
     border: none;
     width: 100%;
     display: block;
@@ -83,14 +82,22 @@
     text-overflow: ellipsis;
 }
 .chip {
-    background: #c5dff1;
+    background: #f1dfc5;
     color: #2c1c0d;
-    padding: 4px 8px;
+    padding: 2px 8px;
     border-radius: 999px;
-    font-size: 12px;
+    min-width: 30px;
+    height: 30px;
     border: 1px solid transparent;
+}
+button .chip {
     cursor: pointer;
 }
+.chip.icon {
+    padding: 2px;
+    width: 30px;
+    font-size: 18px;
+}
 .chip.danger-chip {
     background: #e0564f;
     border: 1px solid #c54740;
diff --git a/wwwroot/css/layout.css b/wwwroot/css/layout.css
index e17c754..5a12bcb 100644
--- a/wwwroot/css/layout.css
+++ b/wwwroot/css/layout.css
@@ -37,8 +37,6 @@
     border-radius: 10px;
     padding: 6px 10px;
     cursor: pointer;
-    min-width: 44px;
-    font-family: "Twemoji Country Flags", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", emoji, sans-serif;
     font-size: 16px;
     font-weight: 400;
     font-style: normal;
diff --git a/wwwroot/index.html b/wwwroot/index.html
index f228b18..10e9492 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -21,7 +21,7 @@
     <div class="auth-title-row">
       <h2 id="auth-title" data-i18n="auth.loginHeading">Log in</h2>
       <div class="lang-switch" id="lang-switch-auth">
-        <button class="lang-button" type="button" aria-label="Language" title="Language">🌐</button>
+        <button class="lang-button chip icon" type="button" aria-label="Language" title="Language">🌐</button>
         <div class="lang-menu hidden">
           <button type="button" data-lang="en" title="English" data-i18n-attr="title" class="flag-button">🇺🇸</button>
           <button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title" class="flag-button">🇩🇪</button>
@@ -76,7 +76,7 @@
     </div>
     <div class="status-right">
       <div class="lang-switch" id="lang-switch-status">
-        <button class="lang-button" type="button" aria-label="Language" title="Language">🌐</button>
+        <button class="lang-button chip icon" type="button" aria-label="Language" title="Language">🌐</button>
         <div class="lang-menu hidden">
           <button type="button" data-lang="en" title="English" data-i18n-attr="title" class="flag-button">🇺🇸</button>
           <button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title" class="flag-button">🇩🇪</button>
diff --git a/wwwroot/js/ui.js b/wwwroot/js/ui.js
index d0af2ee..d632cb5 100644
--- a/wwwroot/js/ui.js
+++ b/wwwroot/js/ui.js
@@ -317,8 +317,8 @@ export function buildCard(
         <h3 class="card-title" title="${s.name}">${s.name}</h3>
         <div class="title-meta">
           ${showAuthor && s.author ? `<span class="chip">${s.author}</span>` : ""}
-          ${allowEdit ? `<button class="chip" data-edit="${s.id}" type="button" title="${t("card.edit")}">✏️</button>` : ""}
-          ${allowDelete ? `<button class="chip danger-chip" data-delete="${s.id}" type="button" title="${t("card.delete")}">🗑️</button>` : ""}
+          ${allowEdit ? `<button class="chip icon" data-edit="${s.id}" type="button" title="${t("card.edit")}">✏️</button>` : ""}
+          ${allowDelete ? `<button class="chip icon danger-chip" data-delete="${s.id}" type="button" title="${t("card.delete")}">✕</button>` : ""}
         </div>
       </div>
       ${hasExtraInfo ? `<p class="muted">` : ""}