poprawka dla malych ekranow

static/css/style.css

@@ -855,3 +855,27 @@ 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 */
+
+/* Responsive buttons - hide text on narrow screens (iPhone 11, iPhone 17 Pro) */
+@media (max-width: 420px) {
+    .btn-group-compact .btn-text {
+        display: none !important;
+    }
+    
+    .btn-group-compact .btn {
+        padding: 0.375rem 0.5rem;
+        min-width: auto;
+    }
+}
+
+/* Medium-narrow screens - smaller font */
+@media (min-width: 421px) and (max-width: 576px) {
+    .btn-group-compact .btn {
+        padding: 0.375rem 0.45rem;
+        font-size: 0.8rem;
+    }
+    
+    .btn-group-compact .btn-text {
+        font-size: 0.75rem;
+    }
+}

templates/main.html

@@ -2,17 +2,20 @@
 {% block title %}Twoje listy zakupów{% endblock %}
 {% block content %}
 
+
 {% if not current_user.is_authenticated %}
 <div class="alert alert-info text-center" role="alert">
   ℹ️ Nie jesteś zalogowany/a. Możesz przeglądać tylko listy publiczne.
 </div>
 {% endif %}
 
+
 {% if current_user.is_authenticated %}
 <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
   <h2 class="mb-2">Stwórz nową listę</h2>
 </div>
 
+
 <div class="card bg-secondary bg-opacity-10 text-white mb-4">
   <div class="card-body">
     <form action="{{ url_for('create_list') }}" method="post">
@@ -31,9 +34,11 @@
 </div>
 {% endif %}
 
+
 {% 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>
@@ -51,6 +56,7 @@
   </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">
@@ -58,6 +64,7 @@
   </button>
 </div>
 
+
 {% if current_user.is_authenticated %}
 <h3 class="mt-4 d-flex justify-content-between align-items-center flex-wrap">
   Twoje listy
@@ -85,39 +92,62 @@
         {% endfor %}
       </span>
 
-      <div class="btn-group mt-2 mt-md-0" role="group">
+
+      <div class="btn-group btn-group-compact 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>
+          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 text-nowrap">✏️ Odznaczaj</a>
+          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 text-nowrap">📋 Kopiuj</a>
+          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 text-nowrap">
-          {% if l.is_public %}🙈 Ukryj{% else %}🐵 Odkryj{% endif %}
+          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 text-nowrap">⚙️ Ustawienia</a>
+          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>
       </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>
 
+
       {# 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>
 
+
       {# 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>
 
+
       <span class="progress-label small fw-bold 
         {% if percent < 51 %}text-white{% else %}text-dark{% endif %}">
         Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
@@ -127,6 +157,7 @@
       </span>
     </div>
 
+
   </li>
   {% endfor %}
 </ul>
@@ -136,10 +167,12 @@
 {% 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>
 
 
+
 {% set lists_to_show = accessible_lists %}
 {% if lists_to_show %}
 <ul class="list-group">
@@ -159,24 +192,33 @@
         {% 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>
+        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 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>
 
+
       {% 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>
 
+
       <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>
 
+
       <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 %}
@@ -189,6 +231,7 @@
 <p><span class="badge rounded-pill bg-secondary opacity-75">Brak list do wyświetlenia</span></p>
 {% endif %}
 
+
 <div class="modal fade" id="archivedModal" tabindex="-1" aria-labelledby="archivedModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg modal-dialog-scrollable">
     <div class="modal-content bg-dark text-white">
@@ -224,6 +267,7 @@
   </div>
 </div>
 
+
 <div class="modal fade" id="monthPickerModal" tabindex="-1" aria-labelledby="monthPickerModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content bg-dark text-white">
@@ -250,9 +294,11 @@
   </div>
 </div>
 
+
 {% block scripts %}
 <script src="{{ url_for('static_bp.serve_js', filename='toggle_button.js') }}?v={{ APP_VERSION }}"></script>
 <script src="{{ url_for('static_bp.serve_js', filename='select_month.js') }}?v={{ APP_VERSION }}"></script>
 {% endblock %}
 
-{% endblock %}
+
+{% endblock %}