From 34cfde795a9b9f8d86cb16a18f895b9d250025a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?=
 <mateusz.gruszczynski@firma.interia.pl>
Date: Wed, 21 Jan 2026 11:11:22 +0100
Subject: [PATCH] kropka kategorii na malych ekranach

---
 static/css/style.css | 24 ++++++++++++++++++++----
 templates/main.html  | 32 ++++++++++++++++++++------------
 2 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index bde065a..9848dac 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -993,13 +993,29 @@ td select.tom-dark {
   .user-label-mobile  { display: none !important; }
 }
 
-.badge.rounded-circle.category-dot {
-  min-width: 0.75rem !important;
-  padding: 0 !important;
-  font-size: 0 !important;
+.category-dot {
+  display: inline-block !important;
+  width: 14px !important;
+  height: 14px !important;
+  border-radius: 50% !important;
+  border: 2px solid rgba(255, 255, 255, 0.8) !important;
+  background-clip: content-box !important;
+  vertical-align: middle !important;
+  margin-right: 2px !important;
+  opacity: 1 !important;
+  font-size: 8px !important;
   line-height: 1 !important;
+  cursor: help !important;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
 }
 
+/* Hover efekt */
+.category-dot:hover {
+  transform: scale(1.3) !important;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
+}
+
+
 .list-title {
   white-space: nowrap !important;
   overflow: hidden !important;
diff --git a/templates/main.html b/templates/main.html
index 742d81b..2e0bb4d 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -84,14 +84,18 @@
         </a>
 
         {% for cat in l.category_badges %}
-          <span class="badge rounded-pill text-dark ms-1 d-none d-sm-inline"
-                style="background-color: {{ cat.color }}; font-size: 0.56rem; opacity: 0.85;">
+          <!-- DESKTOP: nazwa kategorii -->
+          <span class="badge rounded-pill text-dark ms-1 d-none d-sm-inline fw-semibold"
+                style="background-color: {{ cat.color }}; font-size: 0.7rem; opacity: 0.9; padding: 0.3em 0.6em;">
             {{ cat.name }}
           </span>
-          <span class="badge rounded-circle ms-1 d-sm-none category-dot"
-                style="width: 0.75rem; height: 0.75rem; background-color: {{ cat.color }}; 
-                      border: 1px solid rgba(255,255,255,0.4); opacity: 0.95;"
-                title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}"></span>
+          
+          <!-- MOBILE: DUŻA kolorowa kropka -->
+          <span class="ms-1 d-sm-none category-dot"
+                style="background-color: {{ cat.color }};"
+                title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}">
+            ●
+          </span>
         {% endfor %}
       </span>
 
@@ -195,14 +199,18 @@
         </a>
 
         {% for cat in l.category_badges %}
-          <span class="badge rounded-pill text-dark ms-1 d-none d-sm-inline"
-                style="background-color: {{ cat.color }}; font-size: 0.56rem; opacity: 0.85;">
+          <!-- DESKTOP: nazwa kategorii -->
+          <span class="badge rounded-pill text-dark ms-1 d-none d-sm-inline fw-semibold"
+                style="background-color: {{ cat.color }}; font-size: 0.7rem; opacity: 0.9; padding: 0.3em 0.6em;">
             {{ cat.name }}
           </span>
-          <span class="badge rounded-circle ms-1 d-sm-none category-dot"
-                style="width: 0.75rem; height: 0.75rem; background-color: {{ cat.color }}; 
-                      border: 1px solid rgba(255,255,255,0.4); opacity: 0.95;"
-                title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}"></span>
+          
+          <!-- MOBILE: DUŻA kolorowa kropka -->
+          <span class="ms-1 d-sm-none category-dot"
+                style="background-color: {{ cat.color }};"
+                title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}">
+            ●
+          </span>
         {% endfor %}
       </span>