Move breadcrumbs to top

packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/master-detail-email.html.j2

@@ -3,7 +3,7 @@
 {% block page_content %}
 
 <!-- Master-Detail Split View -->
-<div class="flex h-[calc(100vh-8rem)] overflow-hidden">
+<div class="flex h-[calc(100vh-3.5rem)] overflow-hidden">
 
   <!-- Master Pane -->
   <aside id="master-pane"

packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/page.html.j2

@@ -3,28 +3,6 @@
 
 {% block breadcrumbs %}
 
-  <div class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
-    <nav class="text-sm text-gray-500" aria-label="Breadcrumb">
-
-      <sl-breadcrumb id="breadcrumbs">
-        <sl-breadcrumb-item>
-          <sl-icon slot="prefix" name="house"></sl-icon>
-          <a href="/">Home</a>
-        </sl-breadcrumb-item>
-        {% if breadcrumbs %}
-          {% for label, url in breadcrumbs %}
-            <sl-breadcrumb-item class="page-breadcrumb">
-              {% if url %}
-                <a href="{{url}}">{{label}}</a>
-              {% else %}
-                {{ label }}
-              {% endif %}
-            </sl-breadcrumb-item>
-          {% endfor %}
-        {% endif %}
-      </sl-breadcrumb>
-    </nav>
-  </div>
 {% endblock %}
 {% block content %}
 

packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/partials/navbar.html.j2

@@ -15,9 +15,27 @@
     </button>
 
     <!-- Page title or logo -->
-    {% if page_title %}
+    <nav class="text-sm text-gray-500" aria-label="Breadcrumb">
-      <h1 class="text-xl flex ml-2 md:mr-24 font-semibold text-gray-900 sm:text-2xl dark:text-white">{{page_title}}</h1>
+
+      <sl-breadcrumb id="breadcrumbs">
+        <sl-breadcrumb-item>
+          <sl-icon slot="prefix" name="house"></sl-icon>
+          <a href="/">Home</a>
+        </sl-breadcrumb-item>
+        {% if breadcrumbs %}
+          {% for label, url in breadcrumbs %}
+            <sl-breadcrumb-item class="page-breadcrumb">
+              {% if url %}
+                <a href="{{url}}">{{label}}</a>
+              {% else %}
+                {{ label }}
               {% endif %}
+            </sl-breadcrumb-item>
+          {% endfor %}
+        {% endif %}
+      </sl-breadcrumb>
+    </nav>
+
   </div>
 
   <!-- Right: User menu -->

packages/sshecret-admin/src/sshecret_admin/frontend/templates/change_password/index.html.j2

@@ -3,7 +3,7 @@
 
 {% block page_content %}
 
-<div class="h-[calc(100vh-8rem)] bg-gray-100 flex items-center justify-center p-4">
+<div class="h-[calc(100vh-3.5rem)] bg-gray-100 flex items-center justify-center p-4">
   <div class="w-full max-w-xl p-6 space-y-8 bg-white rounded-lg shadow sm:p-8 dark:bg-gray-800">
     <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
       Change Password

packages/sshecret-admin/src/sshecret_admin/frontend/templates/change_password/success.html.j2

@@ -2,7 +2,7 @@
 {% extends "/base/page.html.j2" %}
 
  {% block page_content %}
-<div class="h-[calc(100vh-8rem)] bg-gray-100 flex items-center justify-center p-4">
+<div class="h-[calc(100vh-3.5rem)] bg-gray-100 flex items-center justify-center p-4">
   <div class="text-center xl:max-w-4xl">
     <h1 class="mb-3 text-2xl font-bold leading-tight text-gray-900 sm:text-4xl lg:text-5xl dark:text-white">Password Changed</h1>
     <p class="mb-5 text-base font-normal text-gray-500 md:text-lg dark:text-gray-400">Your password was changed sucessfully. Next time you log in, use your new password.</p>

packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree.html.j2

@@ -1,8 +1,8 @@
 {# This is the master block #}
 
 <div class="flowbite-init-target">
-  <div class="tree-header grid grid-cols-2 place-content-between mb-6">
+  <div class="tree-header grid grid-cols-2 place-content-between mb-2">
-    <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">Client List</h1>
+    <h1 class="text-lg font-semibold text-gray-900 dark:text-white">Client List</h1>
     <div class="flex">
       <div
         class="htmx-indicator mt-2"
@@ -32,8 +32,8 @@
     </div>
     <div class="col-span-full">
       <div class="relative">
-        <div class="border-b border-gray-200 py-2 mb-6">
+        <div class="border-b border-gray-200 py-2">
-          <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
+          <label for="default-search" class="mb-2 text-xs font-medium text-gray-900 sr-only dark:text-white">Search</label>
           <div class="relative">
             <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
               <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
@@ -44,7 +44,7 @@
               type="search"
               id="client-search"
               name="query"
-              class="block w-full p-2.5 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-gray-900 focus:border-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-gray-900 dark:focus:border-gray-900"
+              class="block w-full p-2.5 ps-10 text-xs text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-gray-900 focus:border-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-gray-900 dark:focus:border-gray-900"
               placeholder="Search..."
               required
               hx-post="/clients/query"

packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_items.html.j2

@@ -33,7 +33,7 @@
   {% if pages %}
     <div class="mt-4 text-center flex items-center flex-col border-t border-gray-100">
       <span class="text-sm text-gray-700 dark:text-gray-400">
-        Showing <span class="font-semibold text-gray-900 dark:text-white">{{ pages.offset }}</span> to <span class="font-semibold text-gray-900 dark:text-white">{{ pages.total_pages }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ results.total_results }}</span> Entries
+        Showing <span class="font-semibold text-gray-900 dark:text-white">{{ pages.offset  + 1 }}</span> to <span class="font-semibold text-gray-900 dark:text-white">{{ pages.limit }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ results.total_results }}</span> Entries
       </span>
       {% include 'clients/partials/pagination.html.j2' %}
     </div>

packages/sshecret-admin/src/sshecret_admin/static/css/main.css

@@ -391,6 +391,9 @@
   .order-1 {
     order: 1;
   }
+  .order-2 {
+    order: 2;
+  }
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -463,6 +466,9 @@
   .ms-3 {
     margin-inline-start: calc(var(--spacing) * 3);
   }
+  .ms-auto {
+    margin-inline-start: auto;
+  }
   .me-2 {
     margin-inline-end: calc(var(--spacing) * 2);
   }
@@ -688,12 +694,27 @@
   .h-\[36rem\] {
     height: 36rem;
   }
+  .h-\[calc\(100vh-2rem\)\] {
+    height: calc(100vh - 2rem);
+  }
+  .h-\[calc\(100vh-3\.5rem\)\] {
+    height: calc(100vh - 3.5rem);
+  }
+  .h-\[calc\(100vh-3rem\)\] {
+    height: calc(100vh - 3rem);
+  }
   .h-\[calc\(100vh-4rem\)\] {
     height: calc(100vh - 4rem);
   }
+  .h-\[calc\(100vh-6rem\)\] {
+    height: calc(100vh - 6rem);
+  }
   .h-\[calc\(100vh-8rem\)\] {
     height: calc(100vh - 8rem);
   }
+  .h-\[calc\(100vh-9rem\)\] {
+    height: calc(100vh - 9rem);
+  }
   .h-\[calc\(100vh-10rem\)\] {
     height: calc(100vh - 10rem);
   }
@@ -1257,6 +1278,9 @@
   .border-blue-300 {
     border-color: var(--color-blue-300);
   }
+  .border-blue-700 {
+    border-color: var(--color-blue-700);
+  }
   .border-gray-100 {
     border-color: var(--color-gray-100);
   }
@@ -1341,6 +1365,9 @@
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
+  .bg-blue-700 {
+    background-color: var(--color-blue-700);
+  }
   .bg-emerald-500 {
     background-color: var(--color-emerald-500);
   }
@@ -2779,6 +2806,11 @@
       inset: calc(var(--spacing) * 0);
     }
   }
+  .md\:order-1 {
+    @media (width >= 48rem) {
+      order: 1;
+    }
+  }
   .md\:order-2 {
     @media (width >= 48rem) {
       order: 2;