kropka kategorii na malych ekranach

static/css/style.css

@@ -904,17 +904,16 @@ td select.tom-dark {
 
 
 /* ================================================
-   RESPONSIVE NAVBAR - zachowaj teksty, ale mniejsze
+   RESPONSIVE NAVBAR
    ================================================ */
 
 /* Wąskie ekrany (np. iPhone 11) */
 @media (max-width: 420px) {
-    /* Navbar: zmniejsz odstępy w poziomie */
+
     .navbar .container-fluid {
         gap: 4px;
     }
 
-    /* Logo: zostaje "Lista Zakupów", ale mniejsze */
     .navbar-brand-compact {
         font-size: 0.9rem !important;
         margin-right: 0.25rem;
@@ -934,7 +933,6 @@ td select.tom-dark {
         padding: 0.2rem 0.45rem;
     }
 
-    /* Przyciski po prawej: tylko emoji (tekst chowamy) */
     .nav-buttons-compact .nav-btn-text {
         display: none !important;
     }
@@ -969,7 +967,6 @@ td select.tom-dark {
         font-size: 0.75rem;
     }
 
-    /* Tu tekst w przyciskach może zostać (ale mniejszy) */
     .nav-buttons-compact {
         flex-wrap: nowrap;
     }
@@ -982,7 +979,6 @@ td select.tom-dark {
     }
 }
 
-/* Mobile-only / Desktop-only helpery (jeśli nie chcesz polegać na d-sm-*) */
 @media (max-width: 420px) {
   .user-label-desktop { display: none !important; }
   .user-label-mobile  { display: inline !important; }
@@ -993,22 +989,30 @@ td select.tom-dark {
   .user-label-mobile  { display: none !important; }
 }
 
-.category-dot {
+.category-dot-pure {
   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;
+  background-clip: content-box, border-box !important;
   vertical-align: middle !important;
-  margin-right: 2px !important;
+  margin-right: 3px !important;
   opacity: 1 !important;
-  font-size: 8px !important;
+  padding: 0 !important;
   line-height: 1 !important;
-  cursor: help !important;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
+  font-size: 0 !important;
+  text-indent: -9999px !important;
+  overflow: hidden !important;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
 }
 
+.category-dot-pure::before,
+.category-dot-pure::after {
+  content: none !important;
+}
+
+
 /* Hover efekt */
 .category-dot:hover {
   transform: scale(1.3) !important;