Update README.md

README.md

@@ -16,12 +16,12 @@ Prosta aplikacja webowa do zarządzania listami zakupów z obsługą użytkownik
 - Python 3.9+
 - Docker (opcjonalnie dla produkcji)
 
-## Instalacja lokalna
+## Instalacja lokalna (deweloperska)
 
 1. Sklonuj repozytorium:
 
    ```bash
-   git https://gitea.linuxiarz.pl/gru/lista_zakupowa_live.git
+   git https://git.linuxiarz.pl/gru/lista_zakupowa_live.git
    cd lista_zakupowa_live
    ```
 
@@ -41,14 +41,26 @@ Prosta aplikacja webowa do zarządzania listami zakupów z obsługą użytkownik
    flask --app app.py run
    ```
 
-## Deploy z Docker Compose
+## Deploy z Docker Compose - stack (zalecana)
 
 1. Skonfiguruj `.env`.
 
-2. Uruchom:
+2.1 Uruchom: (pgsql)
 
    ```bash
-   docker-compose up --build
+   bash deploy_docker.sh pgsql
+   ```
+
+2.2 Uruchom: (mysql)
+
+   ```bash
+   bash deploy_docker.sh mysql
+   ```
+
+2.3 Uruchom: (sqlite)
+
+   ```bash
+   bash deploy_docker.sh sqlite
    ```
 
 Aplikacja będzie dostępna pod `http://localhost:8000`.

app.py

@@ -1565,6 +1565,13 @@ def apply_headers(response):
         response.headers["Vary"] = "Accept-Encoding"
         return response
 
+    # --- healthcheck ---
+    if request.path == '/healthcheck':
+        response.headers['Cache-Control'] = 'no-store, no-cache'
+        response.headers.pop('ETag', None)
+        response.headers.pop('Vary', None)
+        return response
+
     # --- redirecty ---
     if response.status_code in (301, 302, 303, 307, 308):
         response.headers["Cache-Control"] = "no-store"
@@ -4098,14 +4105,25 @@ def admin_lists_access(list_id=None):
     )
 
 
-@app.route("/healthcheck")
+@app.route('/healthcheck')
 def healthcheck():
-    header_token = request.headers.get("X-Internal-Check")
-    correct_token = app.config.get("HEALTHCHECK_TOKEN")
-
+    header_token = request.headers.get('X-Internal-Check')
+    correct_token = app.config.get('HEALTHCHECK_TOKEN')
     if header_token != correct_token:
         abort(404)
-    return "OK", 200
+    
+    try:
+        db.session.execute(text('SELECT 1'))
+        db.session.commit()
+        response_data = {"status": "ok"}
+    except Exception as e:
+        response_data = {
+            "status": "waiting",
+            "message": "waiting for db",
+            "error": str(e)
+        }
+    
+    return response_data, 200
 
 
 @app.route("/admin/settings", methods=["GET", "POST"])

deploy/app/Dockerfile

@@ -1,5 +1,4 @@
-
-FROM python:3.14-rc-trixie
+FROM python:3.14-trixie
 #FROM python:3.13-slim
 WORKDIR /app
 

docker-compose.yml

@@ -10,7 +10,7 @@ services:
           "CMD",
           "python",
           "-c",
-          "import urllib.request; import sys; req = urllib.request.Request('http://localhost:${APP_PORT:-8000}/healthcheck', headers={'X-Internal-Check': '${HEALTHCHECK_TOKEN}'}); sys.exit(0) if urllib.request.urlopen(req).read() == b'OK' else sys.exit(1)",
+          "import urllib.request; import sys; req = urllib.request.Request('http://localhost:${APP_PORT:-8000}/healthcheck', headers={'X-Internal-Check': '${HEALTHCHECK_TOKEN}'}); sys.exit(0) if urllib.request.urlopen(req).getcode() == 200 else sys.exit(1)",
         ]
       interval: 30s
       timeout: 10s

entrypoint.sh

@@ -1,10 +1,16 @@
 #!/bin/sh
 
-# Czekaj na bazę w Pythonie
-python _tools/wait_for_db.py
+# Jeśli nie przekazano zmiennej środowiskowej DB_ENGINE, ustaw na sqlite
+DB_ENGINE=${DB_ENGINE:-sqlite}
 
-# Jak baza gotowa, to migruj li daj informacje
+echo "Starting app with database engine: $DB_ENGINE"
+
+# Czekaj na bazę, jeśli jest inna niż sqlite (np. PostgreSQL)
+if [ "$DB_ENGINE" != "sqlite" ]; then
+  python _tools/wait_for_db.py --engine "$DB_ENGINE"
+fi
+
+# Migracje i start aplikacji
 flask db upgrade 2>/dev/null || flask db_info
 
-# Start aplikacji
 exec python app.py

static/css/style.css

@@ -855,3 +855,182 @@ td select.tom-dark {
 .sens-low  { background: rgba(108,117,125,.25); color: #ced4da; }  /* szary */
 .sens-mid  { background: rgba(13,110,253,.25);  color: #9ec5fe; }  /* niebieski */
 .sens-high { background: rgba(220,53,69,.25);   color: #f1aeb5; }  /* czerwony */
+
+/* =========================================================
+   COMPACT: przyciski akcji na listach
+   - Desktop: standard Bootstrap
+   - <=576px: kompakt
+========================================================= */
+
+/* <=420px: tylko emoji */
+@media (max-width: 420px) {
+  .btn-group-compact .btn-text {
+    display: none !important;
+  }
+
+  .btn-group-compact .btn {
+    padding: 0.22rem 0.45rem;
+    min-width: auto;
+    font-size: 0.9rem;
+    line-height: 1.1;
+  }
+}
+
+/* 421–576px: lekko ciaśniej, ale tekst zostaje */
+@media (min-width: 421px) and (max-width: 576px) {
+  .btn-group-compact .btn {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.82rem;
+    line-height: 1.1;
+  }
+
+  .btn-group-compact .btn-text {
+    font-size: 0.75rem;
+  }
+}
+
+/* Medium-narrow screens */
+@media (min-width: 421px) and (max-width: 576px) {
+    .btn-group-compact .btn {
+        padding: 0.24rem 0.45rem;  /* ciaśniej */
+        font-size: 0.82rem;
+        line-height: 1.1;
+    }
+
+    .btn-group-compact .btn-text {
+        font-size: 0.75rem;
+    }
+}
+
+
+/* ================================================
+   RESPONSIVE NAVBAR
+   ================================================ */
+
+/* Wąskie ekrany (np. iPhone 11) */
+@media (max-width: 420px) {
+
+    .navbar .container-fluid {
+        gap: 4px;
+    }
+
+    .navbar-brand-compact {
+        font-size: 0.9rem !important;
+        margin-right: 0.25rem;
+        white-space: nowrap;
+    }
+    .navbar-brand-compact .navbar-brand-text {
+        font-size: 0.95em;
+    }
+
+    .user-info-compact {
+        font-size: 0.72rem !important;
+        line-height: 0.9;
+        white-space: nowrap;
+    }
+    .user-info-compact .badge {
+        font-size: 0.68rem;
+        padding: 0.2rem 0.45rem;
+    }
+
+    .nav-buttons-compact .nav-btn-text {
+        display: none !important;
+    }
+    .nav-buttons-compact {
+        gap: 0.35rem !important;
+        flex-wrap: nowrap;
+    }
+    .nav-buttons-compact .btn {
+        padding: 0.22rem 0.45rem;
+        min-width: auto;
+        line-height: 1.1;
+    }
+}
+
+
+/* Małe ekrany (np. 421-576px) */
+@media (min-width: 421px) and (max-width: 576px) {
+    .navbar .container-fluid {
+        gap: 8px;
+    }
+
+    .navbar-brand-compact {
+        font-size: 1.25rem !important;
+        white-space: nowrap;
+    }
+
+    .user-info-compact {
+        font-size: 0.8rem !important;
+        white-space: nowrap;
+    }
+    .user-info-compact .badge {
+        font-size: 0.75rem;
+    }
+
+    .nav-buttons-compact {
+        flex-wrap: nowrap;
+    }
+    .nav-buttons-compact .btn {
+        font-size: 0.8rem;
+        padding: 0.25rem 0.45rem;
+    }
+    .nav-buttons-compact .nav-btn-text {
+        font-size: 0.75rem;
+    }
+}
+
+@media (max-width: 420px) {
+  .user-label-desktop { display: none !important; }
+  .user-label-mobile  { display: inline !important; }
+}
+
+@media (min-width: 421px) {
+  .user-label-desktop { display: inline !important; }
+  .user-label-mobile  { display: none !important; }
+}
+
+.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, border-box !important;
+  vertical-align: middle !important;
+  margin-right: 3px !important;
+  opacity: 1 !important;
+  padding: 0 !important;
+  line-height: 1 !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;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
+}
+
+
+.list-title {
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  max-width: 70% !important;
+  display: inline-block !important;
+}
+
+/* Bardzo małe ekrany */
+@media (max-width: 420px) {
+  .list-title {
+    max-width: 60% !important;
+  }
+}

static/js/admin_settings.js

@@ -77,6 +77,28 @@
     form.querySelectorAll('input[type="color"].category-color').forEach(updatePreview);
   });
 
+  form.querySelectorAll(".use-default").forEach(btn => {
+    btn.addEventListener("click", () => {
+      const name = btn.getAttribute("data-target");
+      const input = form.querySelector(`input[name="${name}"]`);
+      if (!input) return;
+
+      const card = input.closest(".col-12, .col-md-6, .col-lg-4") || input.closest(".col-12");
+      let autoHex = (input.dataset.auto || "").trim();
+      if (!autoHex && card) {
+        autoHex = (card.querySelector(".hex-auto")?.textContent || "").trim();
+      }
+      if (autoHex && !autoHex.startsWith("#")) autoHex = `#${autoHex}`;
+
+      if (autoHex) {
+        input.disabled = false;
+        removeHiddenClear(input);
+        input.value = autoHex;
+        updatePreview(input);
+      }
+    });
+  });
+
   (function () {
     const slider = document.getElementById("ocr_sensitivity");
     const badge  = document.getElementById("ocr_sens_badge");

templates/admin/settings.html

@@ -66,24 +66,30 @@
         <div class="col-12 col-md-6 col-lg-4">
           <label class="form-label d-block mb-2">{{ c.name }}</label>
 
-          <div class="input-group">
-            <input
-              type="color"
-              class="form-control form-control-color category-color"
-              name="color_{{ c.id }}"
-              value="{{ hex_override or '' }}"
-              {% if not hex_override %}data-empty="1"{% endif %}
-              aria-label="Kolor kategorii {{ c.name }}"
-            >
-            <button type="button" class="btn btn-outline-light btn-sm reset-one" data-target="color_{{ c.id }}">
-              🔄 Reset
+        <div class="input-group">
+        <input
+        type="color"
+        class="form-control form-control-color category-color"
+        name="color_{{ c.id }}"
+        value="{{ hex_override or '' }}"
+        data-auto="{{ hex_auto }}"
+        {% if not hex_override %}data-empty="1"{% endif %}
+        aria-label="Kolor kategorii {{ c.name }}"
+        >
+
+        <div class="btn-group" role="group" aria-label="Akcje koloru">
+            <button type="button"
+                    class="btn btn-outline-light btn-sm reset-one"
+                    data-target="color_{{ c.id }}">
+            🔄 Reset
             </button>
             <button type="button"
-                    class="btn btn-outline-light btn-sm use-default ms-2"
+                    class="btn btn-outline-light btn-sm use-default"
                     data-target="color_{{ c.id }}">
             🎯 Przywróć domyślny
             </button>
-          </div>
+        </div>
+        </div>
 
           <div class="color-indicators mt-2">
             <div class="indicator">

templates/base.html

@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="pl">
-
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -9,32 +8,27 @@
 
   {# --- Bootstrap i główny css zawsze --- #}
   <link href="{{ url_for('static_bp.serve_css', filename='style.css') }}?v={{ APP_VERSION }}" rel="stylesheet">
-  <link href="{{ url_for('static_bp.serve_css_lib', filename='bootstrap.min.css') }}?v={{ APP_VERSION }}"
-    rel="stylesheet">
+  <link href="{{ url_for('static_bp.serve_css_lib', filename='bootstrap.min.css') }}?v={{ APP_VERSION }}" rel="stylesheet">
 
   {# --- Style CSS ładowane tylko dla niezablokowanych --- #}
   {% set exclude_paths = ['/system-auth'] %}
   {% if (exclude_paths | select("in", request.path) | list | length == 0)
   and has_authorized_cookie
   and not is_blocked %}
-  <link href="{{ url_for('static_bp.serve_css_lib', filename='glightbox.min.css') }}?v={{ APP_VERSION }}"
-    rel="stylesheet">
-  <link href="{{ url_for('static_bp.serve_css_lib', filename='sort_table.min.css') }}?v={{ APP_VERSION }}"
-    rel="stylesheet">
+  <link href="{{ url_for('static_bp.serve_css_lib', filename='glightbox.min.css') }}?v={{ APP_VERSION }}" rel="stylesheet">
+  <link href="{{ url_for('static_bp.serve_css_lib', filename='sort_table.min.css') }}?v={{ APP_VERSION }}" rel="stylesheet">
   {% endif %}
 
   {# --- Cropper CSS tylko dla wybranych podstron --- #}
   {% set substrings_cropper = ['/admin/receipts', '/edit_my_list'] %}
   {% if substrings_cropper | select("in", request.path) | list | length > 0 %}
-  <link href="{{ url_for('static_bp.serve_css_lib', filename='cropper.min.css') }}?v={{ APP_VERSION }}"
-    rel="stylesheet">
+  <link href="{{ url_for('static_bp.serve_css_lib', filename='cropper.min.css') }}?v={{ APP_VERSION }}" rel="stylesheet">
   {% endif %}
 
   {# --- Tom Select CSS tylko dla wybranych podstron --- #}
   {% set substrings_tomselect = ['/edit_my_list', '/admin/edit_list', '/admin/edit_categories'] %}
   {% if substrings_tomselect | select("in", request.path) | list | length > 0 %}
-  <link href="{{ url_for('static_bp.serve_css_lib', filename='tom-select.bootstrap5.min.css') }}?v={{ APP_VERSION }}"
-    rel="stylesheet">
+  <link href="{{ url_for('static_bp.serve_css_lib', filename='tom-select.bootstrap5.min.css') }}?v={{ APP_VERSION }}" rel="stylesheet">
   {% endif %}
 </head>
 
@@ -42,36 +36,88 @@
 
   <nav class="navbar navbar-dark bg-dark mb-3">
     <div class="container-fluid">
-      <a class="navbar-brand fw-bold fs-4 text-success" href="/">
-        🛒 <span class="text-warning">Lista</span> Zakupów
+      <a class="navbar-brand navbar-brand-compact fw-bold fs-4 text-success" href="/">
+        🛒 <span class="text-warning navbar-brand-text">Lista</span> <span class="navbar-brand-text">Zakupów</span>
       </a>
 
       {% if has_authorized_cookie and not is_blocked %}
-      {% if current_user.is_authenticated %}
-      <div class="d-flex justify-content-center align-items-center text-white small flex-wrap text-center">
-        <span class="me-1">Zalogowany:</span>
-        <span class="badge rounded-pill bg-success">{{ current_user.username }}</span>
-      </div>
-      {% else %}
-      <div class="d-flex justify-content-center align-items-center text-white small flex-wrap text-center">
-        <span class="me-1">Przeglądasz jako</span>
-        <span class="badge rounded-pill bg-info">niezalogowany/a</span>
-      </div>
-      {% endif %}
+        {% if current_user.is_authenticated %}
+
+          <!-- Desktop/tablet: "Zalogowany:" -->
+          <div class="d-none d-sm-flex justify-content-center align-items-center text-white small flex-wrap text-center user-info-compact">
+            <span class="me-1">Zalogowany:</span>
+            <span class="badge rounded-pill bg-success">{{ current_user.username }}</span>
+          </div>
+
+          <!-- Mobile: 👤 zamiast "Zalogowany:" -->
+          <div class="d-flex d-sm-none justify-content-center align-items-center text-white small flex-wrap text-center user-info-compact">
+            <span class="me-1" aria-label="Zalogowany">👤</span>
+            <span class="badge rounded-pill bg-success">{{ current_user.username }}</span>
+          </div>
+
+        {% else %}
+
+          <!-- Desktop/tablet: tekst -->
+          <div class="d-none d-sm-flex justify-content-center align-items-center text-white small flex-wrap text-center user-info-compact">
+            <span class="me-1 user-info-label">Przeglądasz jako</span>
+            <span class="badge rounded-pill bg-info">niezalogowany/a</span>
+          </div>
+
+          <!-- Mobile: ikonka zamiast tekstu -->
+          <div class="d-flex d-sm-none justify-content-center align-items-center text-white small flex-wrap text-center user-info-compact">
+            <span class="me-1" aria-label="Niezalogowany">👥</span>
+            <span class="badge rounded-pill bg-info">gość</span>
+          </div>
+
+        {% endif %}
       {% endif %}
 
       {% if not is_blocked and request.endpoint and request.endpoint != 'system_auth' %}
-      <div class="d-flex align-items-center gap-2 flex-wrap">
+
         {% if current_user.is_authenticated %}
-        {% if current_user.is_admin %}
-        <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-light btn-sm">⚙️</a>
-        {% endif %}
-        <a href="{{ url_for('expenses') }}" class="btn btn-outline-light btn-sm">📊</a>
-        <a href="{{ url_for('logout') }}" class="btn btn-outline-light btn-sm">🚪</a>
+
+          <!-- Desktop/tablet: bez tooltipów -->
+          <div class="d-none d-sm-flex align-items-center gap-2 flex-wrap nav-buttons-compact">
+            {% if current_user.is_admin %}
+            <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-light btn-sm">
+              ⚙️<span class="nav-btn-text ms-1">Panel</span>
+            </a>
+            {% endif %}
+            <a href="{{ url_for('expenses') }}" class="btn btn-outline-light btn-sm">
+              📊<span class="nav-btn-text ms-1">Wydatki</span>
+            </a>
+            <a href="{{ url_for('logout') }}" class="btn btn-outline-light btn-sm">
+              🚪<span class="nav-btn-text ms-1">Wyloguj</span>
+            </a>
+          </div>
+
+          <!-- Mobile: tooltipy (bo tekst przycisków znika CSS-em) -->
+          <div class="d-flex d-sm-none align-items-center gap-2 flex-wrap nav-buttons-compact">
+            {% if current_user.is_admin %}
+            <a href="{{ url_for('admin_panel') }}"
+               class="btn btn-outline-light btn-sm"
+               data-bs-toggle="tooltip" title="Panel admina">
+              ⚙️<span class="nav-btn-text ms-1">Panel</span>
+            </a>
+            {% endif %}
+            <a href="{{ url_for('expenses') }}"
+               class="btn btn-outline-light btn-sm"
+               data-bs-toggle="tooltip" title="Wydatki">
+              📊<span class="nav-btn-text ms-1">Wydatki</span>
+            </a>
+            <a href="{{ url_for('logout') }}"
+               class="btn btn-outline-light btn-sm"
+               data-bs-toggle="tooltip" title="Wyloguj">
+              🚪<span class="nav-btn-text ms-1">Wyloguj</span>
+            </a>
+          </div>
+
         {% else %}
-        <a href="{{ url_for('login') }}" class="btn btn-outline-light btn-sm">🔑 Zaloguj</a>
+          <div class="d-flex align-items-center gap-2 flex-wrap nav-buttons-compact">
+            <a href="{{ url_for('login') }}" class="btn btn-outline-light btn-sm">🔑 Zaloguj</a>
+          </div>
         {% endif %}
-      </div>
+
       {% endif %}
     </div>
   </nav>
@@ -84,26 +130,36 @@
 
   <footer class="text-center text-secondary small mt-5 mb-3">
     <hr class="text-secondary">
-    <p class="mb-0">© 2025 <strong>linuxiarz.pl</strong> · <a href="https://gitea.linuxiarz.pl/gru/lista_zakupowa_live"
-        target="_blank" class="link-success text-decoration-none"> source code</a>
+    <p class="mb-0">© 2025 <strong>linuxiarz.pl</strong> ·
+      <a href="https://git.linuxiarz.pl/gru/lista_zakupowa_live" target="_blank" class="link-success text-decoration-none">
+        source code
+      </a>
+    </p>
     <div class="small">v{{ APP_VERSION }}</div>
   </footer>
 
   <script src="{{ url_for('static_bp.serve_js_lib', filename='bootstrap.bundle.min.js') }}"></script>
+
   {% if not is_blocked %}
   <script>
     document.addEventListener('DOMContentLoaded', function () {
+      // Tooltips tylko na mobile (bo tylko tam dodajemy data-bs-toggle="tooltip")
+      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+      tooltipTriggerList.forEach(function (el) {
+        new bootstrap.Tooltip(el);
+      });
+
       {% with messages = get_flashed_messages(with_categories = true) %}
       {% for category, message in messages %}
       {% set cat = 'info' if not category else ('danger' if category == 'error' else category) %}
-    {% if message == 'Please log in to access this page.' %}
-    showToast("Aby uzyskać dostęp do tej strony, musisz być zalogowany.", "danger");
-    {% else %}
-    showToast({{ message| tojson }}, "{{ cat }}");
-    {% endif %}
-    {% endfor %}
-    {% endwith %}
-  });
+      {% if message == 'Please log in to access this page.' %}
+      showToast("Aby uzyskać dostęp do tej strony, musisz być zalogowany.", "danger");
+      {% else %}
+      showToast({{ message|tojson }}, "{{ cat }}");
+      {% endif %}
+      {% endfor %}
+      {% endwith %}
+    });
   </script>
 
   {% if request.endpoint != 'system_auth' %}
@@ -114,11 +170,10 @@
   <script src="{{ url_for('static_bp.serve_js', filename='live.js') }}?v={{ APP_VERSION }}"></script>
   <script src="{{ url_for('static_bp.serve_js', filename='sockets.js') }}?v={{ APP_VERSION }}"></script>
   {% endif %}
+
   <script src="{{ url_for('static_bp.serve_js', filename='toasts.js') }}?v={{ APP_VERSION }}"></script>
   <script>
-    let lightbox = GLightbox({
-      selector: '.glightbox'
-    });
+    let lightbox = GLightbox({ selector: '.glightbox' });
   </script>
 
   {% set substrings = ['/admin/receipts', '/edit_my_list'] %}
@@ -128,13 +183,11 @@
 
   {% set substrings = ['/edit_my_list', '/admin/edit_list', '/admin/edit_categories'] %}
   {% if substrings | select("in", request.path) | list | length > 0 %}
-  <script
-    src="{{ url_for('static_bp.serve_js_lib', filename='tom-select.complete.min.js') }}?v={{ APP_VERSION }}"></script>
+  <script src="{{ url_for('static_bp.serve_js_lib', filename='tom-select.complete.min.js') }}?v={{ APP_VERSION }}"></script>
   {% endif %}
 
   {% endif %}
 
   {% block scripts %}{% endblock %}
 </body>
-
-</html>
+</html>

templates/main.html

@@ -31,14 +31,11 @@
 </div>
 {% endif %}
 
-{% set month_names = ["styczeń", "luty", "marzec", "kwiecień", "maj", "czerwiec", "lipiec", "sierpień", "wrzesień",
-"październik", "listopad", "grudzień"] %}
+{% set month_names = ["styczeń","luty","marzec","kwiecień","maj","czerwiec","lipiec","sierpień","wrzesień","październik","listopad","grudzień"] %}
 
-<!-- Pulpit: zwykły <select> -->
 <div class="d-none d-md-flex justify-content-end align-items-center flex-wrap gap-2 mb-3">
   <label for="monthSelect" class="text-white small mb-0">📅 Wybierz miesiąc:</label>
-  <select id="monthSelect" class="form-select form-select-sm bg-dark text-white border-secondary"
-    style="min-width: 180px;">
+  <select id="monthSelect" class="form-select form-select-sm bg-dark text-white border-secondary" style="min-width: 180px;">
     {% for m in month_options %}
     {% set year, month = m.split('-') %}
     <option value="{{ m }}" {% if selected_month==m %}selected{% endif %}>
@@ -51,7 +48,6 @@
   </select>
 </div>
 
-<!-- Telefon: przycisk otwierający modal -->
 <div class="d-md-none mb-3">
   <button class="btn btn-outline-light w-100" data-bs-toggle="modal" data-bs-target="#monthPickerModal">
     📅 Wybierz miesiąc
@@ -61,72 +57,107 @@
 {% if current_user.is_authenticated %}
 <h3 class="mt-4 d-flex justify-content-between align-items-center flex-wrap">
   Twoje listy
-  <button type="button" class="btn btn-sm btn-outline-light ms-2" data-bs-toggle="modal"
-    data-bs-target="#archivedModal">
+  <button type="button" class="btn btn-sm btn-outline-light ms-2" data-bs-toggle="modal" data-bs-target="#archivedModal">
     🗄️ Zarchiwizowane
   </button>
 </h3>
+
 {% if user_lists %}
 <ul class="list-group mb-4">
   {% for l in user_lists %}
   {% set purchased_count = l.purchased_count %}
   {% set total_count = l.total_count %}
   {% set percent = (purchased_count / total_count * 100) if total_count > 0 else 0 %}
+
   <li class="list-group-item bg-dark text-white">
     <div class="d-flex justify-content-between align-items-center flex-wrap w-100">
       <span class="fw-bold">
-        {{ l.title }} (Autor: Ty)
-        {% for cat in l.category_badges %}
-        <span class="badge rounded-pill text-dark ms-1" style="background-color: {{ cat.color }};
-                 font-size: 0.56rem;
-                 opacity: 0.85;">
-          {{ cat.name }}
+        <!-- Desktop/tablet: zwykły tekst -->
+        <span class="d-none d-sm-inline">
+          {{ l.title }} (Autor: Ty)
         </span>
+
+        <!-- Mobile: klikalny tytuł -->
+        <a class="d-inline d-sm-none text-white text-decoration-none"
+          href="{{ url_for('view_list', list_id=l.id) }}">
+          {{ l.title }}
+        </a>
+
+        {% for cat in l.category_badges %}
+          <!-- DESKTOP: nazwa -->
+          <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>
+          
+          <!-- MOBILE -->
+          <span class="ms-1 d-sm-none category-dot-pure"
+                style="background-color: {{ cat.color }};"
+                title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}"></span>
         {% endfor %}
       </span>
 
-      <div class="btn-group mt-2 mt-md-0" role="group">
-        <a href="{{ url_for('view_list', list_id=l.id) }}"
-          class="btn btn-sm btn-outline-light d-flex align-items-center text-nowrap">📂 Otwórz</a>
-        <a href="{{ url_for('shared_list', token=l.share_token) }}"
-          class="btn btn-sm btn-outline-light d-flex align-items-center text-nowrap">✏️ Odznaczaj</a>
-        <a href="{{ url_for('copy_list', list_id=l.id) }}"
-          class="btn btn-sm btn-outline-light d-flex align-items-center text-nowrap">📋 Kopiuj</a>
-        <a href="{{ url_for('toggle_visibility', list_id=l.id) }}"
-          class="btn btn-sm btn-outline-light d-flex align-items-center text-nowrap">
-          {% if l.is_public %}🙈 Ukryj{% else %}🐵 Odkryj{% endif %}
+      <div class="btn-group btn-group-compact mt-2 mt-md-0 d-none d-sm-flex" role="group">
+        <a href="{{ url_for('view_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light d-flex align-items-center">
+          📂 <span class="btn-text ms-1">Otwórz</span>
+        </a>
+        <a href="{{ url_for('shared_list', token=l.share_token) }}" class="btn btn-sm btn-outline-light d-flex align-items-center">
+          ✏️ <span class="btn-text ms-1">Odznaczaj</span>
+        </a>
+        <a href="{{ url_for('copy_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light d-flex align-items-center">
+          📋 <span class="btn-text ms-1">Kopiuj</span>
+        </a>
+        <a href="{{ url_for('toggle_visibility', list_id=l.id) }}" class="btn btn-sm btn-outline-light d-flex align-items-center">
+          {% if l.is_public %}🙈 <span class="btn-text ms-1">Ukryj</span>{% else %}🐵 <span class="btn-text ms-1">Odkryj</span>{% endif %}
+        </a>
+        <a href="{{ url_for('edit_my_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light d-flex align-items-center">
+          ⚙️ <span class="btn-text ms-1">Ustawienia</span>
+        </a>
+      </div>
+
+      <div class="btn-group btn-group-compact mt-2 mt-md-0 d-flex d-sm-none" role="group">
+        <a href="{{ url_for('view_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light d-flex align-items-center"
+           data-bs-toggle="tooltip" title="Otwórz">
+          📂 <span class="btn-text ms-1">Otwórz</span>
+        </a>
+        <a href="{{ url_for('shared_list', token=l.share_token) }}" class="btn btn-sm btn-outline-light d-flex align-items-center"
+           data-bs-toggle="tooltip" title="Odznaczaj">
+          ✏️ <span class="btn-text ms-1">Odznaczaj</span>
+        </a>
+        <a href="{{ url_for('copy_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light d-flex align-items-center"
+           data-bs-toggle="tooltip" title="Kopiuj">
+          📋 <span class="btn-text ms-1">Kopiuj</span>
+        </a>
+        <a href="{{ url_for('toggle_visibility', list_id=l.id) }}" class="btn btn-sm btn-outline-light d-flex align-items-center"
+           data-bs-toggle="tooltip" title="{% if l.is_public %}Ukryj{% else %}Odkryj{% endif %}">
+          {% if l.is_public %}🙈 <span class="btn-text ms-1">Ukryj</span>{% else %}🐵 <span class="btn-text ms-1">Odkryj</span>{% endif %}
+        </a>
+        <a href="{{ url_for('edit_my_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light d-flex align-items-center"
+           data-bs-toggle="tooltip" title="Ustawienia">
+          ⚙️ <span class="btn-text ms-1">Ustawienia</span>
         </a>
-        <a href="{{ url_for('edit_my_list', list_id=l.id) }}"
-          class="btn btn-sm btn-outline-light d-flex align-items-center text-nowrap">⚙️ Ustawienia</a>
       </div>
     </div>
 
     <div class="progress progress-dark progress-thin mt-2 position-relative">
-      {# Kupione #}
       <div class="progress-bar bg-success" role="progressbar"
-        style="width: {{ (purchased_count / total_count * 100) if total_count > 0 else 0 }}%" aria-valuemin="0"
-        aria-valuemax="100"></div>
+           style="width: {{ (purchased_count / total_count * 100) if total_count > 0 else 0 }}%"
+           aria-valuemin="0" aria-valuemax="100"></div>
 
-      {# Niekupione #}
       {% set not_purchased_count = l.not_purchased_count if l.total_count else 0 %}
       <div class="progress-bar bg-warning" role="progressbar"
-        style="width: {{ (not_purchased_count / total_count * 100) if total_count > 0 else 0 }}%" aria-valuemin="0"
-        aria-valuemax="100"></div>
+           style="width: {{ (not_purchased_count / total_count * 100) if total_count > 0 else 0 }}%"
+           aria-valuemin="0" aria-valuemax="100"></div>
 
-      {# Pozostałe #}
       <div class="progress-bar bg-transparent" role="progressbar"
-        style="width: {{ 100 - ((purchased_count + not_purchased_count) / total_count * 100) if total_count > 0 else 100 }}%"
-        aria-valuemin="0" aria-valuemax="100"></div>
+           style="width: {{ 100 - ((purchased_count + not_purchased_count) / total_count * 100) if total_count > 0 else 100 }}%"
+           aria-valuemin="0" aria-valuemax="100"></div>
 
-      <span class="progress-label small fw-bold 
-        {% if percent < 51 %}text-white{% else %}text-dark{% endif %}">
+      <span class="progress-label small fw-bold {% if percent < 51 %}text-white{% else %}text-dark{% endif %}">
         Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
-        {% if l.total_expense > 0 %}
-        — 💸 {{ '%.2f'|format(l.total_expense) }} PLN
-        {% endif %}
+        {% if l.total_expense > 0 %} — 💸 {{ '%.2f'|format(l.total_expense) }} PLN{% endif %}
       </span>
     </div>
-
   </li>
   {% endfor %}
 </ul>
@@ -135,10 +166,13 @@
 {% endif %}
 {% endif %}
 
-
-<h3 class="mt-4"> {% if current_user.is_authenticated %}Udostępnione i publiczne listy innych użytkowników {% else %}
-  Publiczne listy innych użytkowników {% endif %}</h3>
-
+<h3 class="mt-4">
+  {% if current_user.is_authenticated %}
+  Udostępnione i publiczne listy innych użytkowników
+  {% else %}
+  Publiczne listy innych użytkowników
+  {% endif %}
+</h3>
 
 {% set lists_to_show = accessible_lists %}
 {% if lists_to_show %}
@@ -147,35 +181,64 @@
   {% set purchased_count = l.purchased_count %}
   {% set total_count = l.total_count %}
   {% set percent = (purchased_count / total_count * 100) if total_count > 0 else 0 %}
+
   <li class="list-group-item bg-dark text-white">
     <div class="d-flex justify-content-between align-items-center flex-wrap w-100">
       <span class="fw-bold">
-        {{ l.title }} (Autor: {{ l.owner.username if l.owner else '—' }})
-        {% for cat in l.category_badges %}
-        <span class="badge rounded-pill text-dark ms-1" style="background-color: {{ cat.color }};
-                 font-size: 0.56rem; opacity: 0.85;">
-          {{ cat.name }}
+        <!-- Desktop/tablet: zwykły tekst -->
+        <span class="d-none d-sm-inline">
+          {{ l.title }} (Autor: {{ l.owner.username if l.owner else '—' }})
         </span>
+
+        <!-- Mobile: klikalny tytuł -> shared_list -->
+        <a class="d-inline d-sm-none fw-bold list-title text-white text-decoration-none" 
+          href="{{ url_for('view_list', list_id=l.id) }}">
+          {{ l.title }}
+        </a>
+
+        {% for cat in l.category_badges %}
+          <!-- DESKTOP: nazwa -->
+          <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>
+          
+          <!-- MOBILE -->
+          <span class="ms-1 d-sm-none category-dot-pure"
+                style="background-color: {{ cat.color }};"
+                title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}"></span>
         {% endfor %}
       </span>
 
-      <a href="{{ url_for('shared_list', list_id=l.id) }}"
-        class="btn btn-sm btn-outline-light d-flex align-items-center text-nowrap">✏️ Odznaczaj</a>
+      <div class="btn-group btn-group-compact mt-2 mt-md-0 d-none d-sm-flex" role="group">
+        <a href="{{ url_for('shared_list', list_id=l.id) }}"
+           class="btn btn-sm btn-outline-light d-flex align-items-center">
+          ✏️ <span class="btn-text ms-1">Odznaczaj</span>
+        </a>
+      </div>
+
+      <div class="btn-group btn-group-compact mt-2 mt-md-0 d-flex d-sm-none" role="group">
+        <a href="{{ url_for('shared_list', list_id=l.id) }}"
+           class="btn btn-sm btn-outline-light d-flex align-items-center"
+           data-bs-toggle="tooltip" title="Odznaczaj">
+          ✏️ <span class="btn-text ms-1">Odznaczaj</span>
+        </a>
+      </div>
     </div>
 
     <div class="progress progress-dark progress-thin mt-2 position-relative">
       <div class="progress-bar bg-success" role="progressbar"
-        style="width: {{ (purchased_count / total_count * 100) if total_count > 0 else 0 }}%" aria-valuemin="0"
-        aria-valuemax="100"></div>
+           style="width: {{ (purchased_count / total_count * 100) if total_count > 0 else 0 }}%"
+           aria-valuemin="0" aria-valuemax="100"></div>
 
       {% set not_purchased_count = l.not_purchased_count if l.total_count else 0 %}
       <div class="progress-bar bg-warning" role="progressbar"
-        style="width: {{ (not_purchased_count / total_count * 100) if total_count > 0 else 0 }}%" aria-valuemin="0"
-        aria-valuemax="100"></div>
+           style="width: {{ (not_purchased_count / total_count * 100) if total_count > 0 else 0 }}%"
+           aria-valuemin="0" aria-valuemax="100"></div>
 
       <div class="progress-bar bg-transparent" role="progressbar"
-        style="width: {{ 100 - ((purchased_count + not_purchased_count) / total_count * 100) if total_count > 0 else 100 }}%"
-        aria-valuemin="0" aria-valuemax="100"></div>
+           style="width: {{ 100 - ((purchased_count + not_purchased_count) / total_count * 100) if total_count > 0 else 100 }}%"
+           aria-valuemin="0" aria-valuemax="100"></div>
 
       <span class="progress-label small fw-bold {% if percent < 51 %}text-white{% else %}text-dark{% endif %}">
         Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)