Upravil jsem:

responzivitu layoutu, menu, karet, filtrů, tlačítek, tabulek a log panelů v styles.css
tabulky se na menších šířkách horizontálně posouvají místo rozbíjení layoutu
menu má teď přímé položky Přehled, Služby a rozbalovací skupiny Provoz, Správa
stránkování se vůbec nezobrazuje, pokud existuje jen jedna stránka
Předchozí / Další se nezobrazují, když daný směr není dostupný
odstranil jsem staré neaktivní disabled pagination odkazy

app/routes/apps.py

@@ -167,16 +167,28 @@ def apps_page(
             params["status"] = selected_status
         return f"/portal/apps?{urlencode(params)}"
 
-    pagination = f"""
+    previous_link = (
-        <div class="pagination">
+        f'<a class="btn btn-secondary" href="{page_url(page_number - 1)}">Předchozí</a>'
-            <span>Zobrazeno {first_item}-{last_item} z {total_apps}</span>
+        if page_number > 1
-            <div class="pagination-actions">
+        else ""
-                <a class="btn btn-secondary{' disabled' if page_number <= 1 else ''}" href="{page_url(max(1, page_number - 1))}">Předchozí</a>
+    )
-                <span class="page-indicator">Strana {page_number} / {total_pages}</span>
+    next_link = (
-                <a class="btn btn-secondary{' disabled' if page_number >= total_pages else ''}" href="{page_url(min(total_pages, page_number + 1))}">Další</a>
+        f'<a class="btn btn-secondary" href="{page_url(page_number + 1)}">Další</a>'
+        if page_number < total_pages
+        else ""
+    )
+    pagination = ""
+    if total_pages > 1:
+        pagination = f"""
+            <div class="pagination">
+                <span>Zobrazeno {first_item}-{last_item} z {total_apps}</span>
+                <div class="pagination-actions">
+                    {previous_link}
+                    <span class="page-indicator">Strana {page_number} / {total_pages}</span>
+                    {next_link}
+                </div>
             </div>
-        </div>
+        """
-    """
 
     return page(
         "Služby",

app/routes/deployments.py

@@ -225,20 +225,28 @@ async def deployments_page(
     source_options = render_options(options["sources"], selected_source, "Všechny zdroje")
     first_item = offset + 1 if total_deployments else 0
     last_item = min(offset + len(deployments), total_deployments)
-    previous_disabled = " disabled" if page_number <= 1 else ""
+    previous_link = (
-    next_disabled = " disabled" if page_number >= total_pages else ""
+        f'<a class="btn btn-secondary" href="{pagination_url(page_number - 1, selected_status, selected_app, selected_source)}">Předchozí</a>'
-    previous_href = pagination_url(max(1, page_number - 1), selected_status, selected_app, selected_source)
+        if page_number > 1
-    next_href = pagination_url(min(total_pages, page_number + 1), selected_status, selected_app, selected_source)
+        else ""
-    pagination = f"""
+    )
-        <div class="pagination">
+    next_link = (
-            <span>Zobrazeno {first_item}-{last_item} z {total_deployments}</span>
+        f'<a class="btn btn-secondary" href="{pagination_url(page_number + 1, selected_status, selected_app, selected_source)}">Další</a>'
-            <div class="pagination-actions">
+        if page_number < total_pages
-                <a class="btn btn-secondary{previous_disabled}" href="{previous_href}" aria-disabled="{str(page_number <= 1).lower()}">Předchozí</a>
+        else ""
-                <span class="page-indicator">Strana {page_number} / {total_pages}</span>
+    )
-                <a class="btn btn-secondary{next_disabled}" href="{next_href}" aria-disabled="{str(page_number >= total_pages).lower()}">Další</a>
+    pagination = ""
+    if total_pages > 1:
+        pagination = f"""
+            <div class="pagination">
+                <span>Zobrazeno {first_item}-{last_item} z {total_deployments}</span>
+                <div class="pagination-actions">
+                    {previous_link}
+                    <span class="page-indicator">Strana {page_number} / {total_pages}</span>
+                    {next_link}
+                </div>
             </div>
-        </div>
+        """
-    """
 
     return page(
         "Nasazení",

app/routes/jobs.py

@@ -221,16 +221,28 @@ def jobs_page(
             params["target"] = selected_target
         return f"/portal/jobs?{urlencode(params)}"
 
-    pagination = f"""
+    previous_link = (
-        <div class="pagination">
+        f'<a class="btn btn-secondary" href="{page_url(page_number - 1)}">Předchozí</a>'
-            <span>Zobrazeno {first_item}-{last_item} z {total_jobs}</span>
+        if page_number > 1
-            <div class="pagination-actions">
+        else ""
-                <a class="btn btn-secondary{' disabled' if page_number <= 1 else ''}" href="{page_url(max(1, page_number - 1))}">Předchozí</a>
+    )
-                <span class="page-indicator">Strana {page_number} / {total_pages}</span>
+    next_link = (
-                <a class="btn btn-secondary{' disabled' if page_number >= total_pages else ''}" href="{page_url(min(total_pages, page_number + 1))}">Další</a>
+        f'<a class="btn btn-secondary" href="{page_url(page_number + 1)}">Další</a>'
+        if page_number < total_pages
+        else ""
+    )
+    pagination = ""
+    if total_pages > 1:
+        pagination = f"""
+            <div class="pagination">
+                <span>Zobrazeno {first_item}-{last_item} z {total_jobs}</span>
+                <div class="pagination-actions">
+                    {previous_link}
+                    <span class="page-indicator">Strana {page_number} / {total_pages}</span>
+                    {next_link}
+                </div>
             </div>
-        </div>
+        """
-    """
 
     return page(
         "Úlohy",

app/routes/workers.py

@@ -115,16 +115,28 @@ def workers_page(
             params["q"] = query
         return f"/portal/workers?{urlencode(params)}"
 
-    pagination = f"""
+    previous_link = (
-        <div class="pagination">
+        f'<a class="btn btn-secondary" href="{page_url(page_number - 1)}">Předchozí</a>'
-            <span>Zobrazeno {first_item}-{last_item} z {total_filtered}</span>
+        if page_number > 1
-            <div class="pagination-actions">
+        else ""
-                <a class="btn btn-secondary{' disabled' if page_number <= 1 else ''}" href="{page_url(max(1, page_number - 1))}">Předchozí</a>
+    )
-                <span class="page-indicator">Strana {page_number} / {total_pages}</span>
+    next_link = (
-                <a class="btn btn-secondary{' disabled' if page_number >= total_pages else ''}" href="{page_url(min(total_pages, page_number + 1))}">Další</a>
+        f'<a class="btn btn-secondary" href="{page_url(page_number + 1)}">Další</a>'
+        if page_number < total_pages
+        else ""
+    )
+    pagination = ""
+    if total_pages > 1:
+        pagination = f"""
+            <div class="pagination">
+                <span>Zobrazeno {first_item}-{last_item} z {total_filtered}</span>
+                <div class="pagination-actions">
+                    {previous_link}
+                    <span class="page-indicator">Strana {page_number} / {total_pages}</span>
+                    {next_link}
+                </div>
             </div>
-        </div>
+        """
-    """
     status_options = "".join(
         f'<option value="{value}"{" selected" if selected_status == value else ""}>{label}</option>'
         for value, label in [("", "Všichni workeři"), ("online", "Online"), ("offline", "Offline")]

app/static/styles.css

@@ -44,6 +44,13 @@ header {
     box-shadow: 0 10px 26px rgba(30, 81, 107, 0.16);
 }
 
+nav {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
 .brand {
     display: inline-flex;
     align-items: center;
@@ -70,18 +77,53 @@ header {
 nav a {
     color: white;
     text-decoration: none;
-    margin-left: 8px;
     font-weight: 600;
     padding: 9px 12px;
     border-radius: 8px;
 }
 
-.nav-group {
+nav a:hover,
-    color: rgba(255, 255, 255, 0.62);
+.nav-menu-button:hover,
-    margin-left: 14px;
+.nav-menu:focus-within .nav-menu-button,
-    font-size: 11px;
+.nav-menu:hover .nav-menu-button {
-    font-weight: 800;
+    background: rgba(255, 255, 255, 0.12);
-    text-transform: uppercase;
+    text-decoration: none;
+}
+
+.nav-menu {
+    position: relative;
+}
+
+.nav-menu-button {
+    background: transparent;
+    color: white;
+    padding: 9px 12px;
+    min-height: 0;
+}
+
+.nav-menu-panel {
+    display: none;
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    z-index: 20;
+    min-width: 180px;
+    background: var(--secondary-dark);
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 8px;
+    padding: 6px;
+    box-shadow: 0 12px 28px rgba(10, 31, 42, 0.28);
+}
+
+.nav-menu:hover .nav-menu-panel,
+.nav-menu:focus-within .nav-menu-panel {
+    display: block;
+}
+
+.nav-menu-panel a {
+    display: block;
+    margin: 0;
+    white-space: nowrap;
 }
 
 .user-menu {
@@ -134,6 +176,7 @@ main {
     padding: 22px;
     box-shadow: 0 8px 24px rgba(30, 81, 107, 0.07);
     margin-bottom: 24px;
+    overflow-x: auto;
 }
 
 .card h2 {
@@ -211,6 +254,7 @@ main {
 table {
     border-collapse: collapse;
     width: 100%;
+    min-width: 760px;
     margin-top: 12px;
 }
 
@@ -260,6 +304,18 @@ button:hover,
     text-decoration: none;
 }
 
+.nav-menu-button,
+.nav-menu-button:hover {
+    background: transparent;
+    color: white;
+    width: auto;
+}
+
+.nav-menu:hover .nav-menu-button,
+.nav-menu:focus-within .nav-menu-button {
+    background: rgba(255, 255, 255, 0.12);
+}
+
 .btn + .btn {
     margin-left: 8px;
 }
@@ -476,3 +532,102 @@ pre {
     color: var(--secondary);
     white-space: nowrap;
 }
+
+@media (max-width: 980px) {
+    header {
+        align-items: flex-start;
+        flex-direction: column;
+        padding: 14px 18px;
+    }
+
+    .brand img {
+        width: 120px;
+    }
+
+    nav {
+        width: 100%;
+    }
+
+    .nav-menu-panel {
+        position: static;
+        width: 100%;
+        margin-top: 4px;
+        box-shadow: none;
+    }
+
+    .user-menu {
+        width: 100%;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+    }
+
+    main {
+        padding: 18px;
+    }
+}
+
+@media (max-width: 640px) {
+    .brand {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 8px;
+        font-size: 16px;
+    }
+
+    nav a,
+    .nav-menu,
+    .nav-menu-button {
+        width: 100%;
+    }
+
+    .nav-menu-button,
+    nav a {
+        text-align: left;
+    }
+
+    .stats-grid,
+    .grid {
+        grid-template-columns: 1fr;
+    }
+
+    .card {
+        padding: 16px;
+    }
+
+    .filter-form,
+    .inline-form {
+        align-items: stretch;
+        flex-direction: column;
+    }
+
+    input,
+    select,
+    button,
+    .btn {
+        width: 100%;
+    }
+
+    .btn + .btn {
+        margin-left: 0;
+        margin-top: 8px;
+    }
+
+    .cmd-row,
+    .copy-row {
+        grid-template-columns: 1fr;
+    }
+
+    .copy-button,
+    .actions-cell button {
+        width: 100%;
+    }
+
+    .pagination {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .pagination-actions {
+        width: 100%;
+    }
+}

app/templates/layout.py

@@ -14,17 +14,23 @@ def page(title: str, body: str, user=None) -> str:
         display_name = html.escape(user.get("display_name") or user.get("username", ""))
         nav = """
             <nav>
-                <span class="nav-group">Přehled</span>
                 <a href="/portal/operations">Přehled</a>
-                <span class="nav-group">Služby</span>
                 <a href="/portal/apps">Služby</a>
-                <span class="nav-group">Provoz</span>
+                <div class="nav-menu">
-                <a href="/portal/jobs">Úlohy</a>
+                    <button type="button" class="nav-menu-button">Provoz</button>
-                <a href="/portal/deployments">Nasazení</a>
+                    <div class="nav-menu-panel">
-                <a href="/portal/workers">Workery</a>
+                        <a href="/portal/jobs">Úlohy</a>
-                <span class="nav-group">Správa</span>
+                        <a href="/portal/deployments">Nasazení</a>
-                <a href="/portal/audit">Audit</a>
+                        <a href="/portal/workers">Workery</a>
-                <a href="/portal/backups">Zálohy</a>
+                    </div>
+                </div>
+                <div class="nav-menu">
+                    <button type="button" class="nav-menu-button">Správa</button>
+                    <div class="nav-menu-panel">
+                        <a href="/portal/audit">Audit</a>
+                        <a href="/portal/backups">Zálohy</a>
+                    </div>
+                </div>
             </nav>
         """
         user_panel = f"""