completion-kit 0.5.21 → 0.5.22

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e04e66d89aab0762a3d58532984bf73a8a18c47c7f29002c4138c0770f412fd9
-  data.tar.gz: 221647dc0afd30c24644be27e1b909e901752478044b3270abc9fd717355d782
+  metadata.gz: 3849ee4680223b7e395bf66c8bf99c69fe58e297571d82c7d0e4785c6f20e9ff
+  data.tar.gz: 66a2b835cd71061fba1587d27d37b7729c996f4218514ad33e5046c265598703
 SHA512:
-  metadata.gz: a974fe2b24af3ab7e12a354ab946ec1817f5740507c0c052266879dfa9a2a82d091f79034140e15585c60fd6c6a7c80ae1e86fe7bcd262da8b8ea686ea65f0a6
-  data.tar.gz: cb1339bc6e3b4787a2fb3a6b82a789d46432938781d17745914cb8763590b7c339f9d666c6139ea9e4e8f4c44818de49727234af9fe7b1585379abdca3c308ec
+  metadata.gz: 527ec77e97348588f25383a84561a2659f47e9634c21ccb858ec298f12788cac44804616e28271831799bd8ed7be774511635f8579a8c096ecc581e9f1828457
+  data.tar.gz: 99b245e3401f1eb5bc196c8704660de5928c12a193b8c1b01732d17e7ec5082d07b568e1bdb467986c26cc3adcbaaaae4af01f1f3e5cf46698b12f4ca2840df7

data/app/assets/stylesheets/completion_kit/application.css

@@ -118,6 +118,35 @@ form.button_to {
   padding: 0.75rem 0;
 }
 
+/* Mobile navigation — a <details> hamburger. On desktop the trigger is
+   hidden and the nav shows inline; at the mobile breakpoint the nav
+   collapses behind the trigger and opens as a dropdown panel. The two
+   always-show rules cover both the legacy and ::details-content models for
+   hiding closed <details> content. This block must precede the mobile media
+   query so the media query's rules win on source order. */
+.ck-nav-menu {
+  position: relative;
+  display: flex;
+}
+.ck-nav-menu > .ck-nav { display: flex; }
+.ck-nav-menu::details-content { content-visibility: visible; }
+.ck-nav-menu__trigger {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 2.6rem;
+  height: 2.6rem;
+  color: var(--ck-text);
+  background: var(--ck-surface);
+  border: 1px solid var(--ck-line);
+  border-radius: var(--ck-radius);
+  cursor: pointer;
+  list-style: none;
+}
+.ck-nav-menu__trigger::-webkit-details-marker { display: none; }
+.ck-nav-menu__trigger::marker { content: ""; }
+.ck-nav-menu[open] .ck-nav-menu__trigger { border-color: var(--ck-dim); }
+
 .ck-brand {
   display: inline-flex;
   align-items: center;
@@ -2755,12 +2784,21 @@ select.ck-input {
   }
 
   .ck-actions,
-  .ck-toolbar,
-  .ck-nav {
+  .ck-toolbar {
     width: 100%;
   }
 
+  /* Page header stacks: title, then lead text full-width, then action. */
+  .ck-page-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* Result tables scroll horizontally within their own box instead of
+     stretching the page — fixed column widths overflow a phone otherwise. */
   .ck-results-table {
+    display: block;
+    overflow-x: auto;
     font-size: 0.85rem;
   }
 
@@ -2776,6 +2814,29 @@ select.ck-input {
   .ck-review-card {
     padding: 1rem;
   }
+
+  /* Topbar nav collapses behind the hamburger trigger. */
+  .ck-nav-menu__trigger {
+    display: inline-flex;
+  }
+  .ck-nav-menu:not([open]) > .ck-nav {
+    display: none;
+  }
+  .ck-nav-menu[open] > .ck-nav {
+    position: absolute;
+    right: 0;
+    top: calc(100% + 0.6rem);
+    flex-direction: column;
+    align-items: stretch;
+    width: 13rem;
+    padding: 0.5rem;
+    gap: 0.35rem;
+    background: var(--ck-surface);
+    border: 1px solid var(--ck-line);
+    border-radius: var(--ck-radius);
+    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
+    z-index: 50;
+  }
 }
 
 .ck-api-endpoint {
@@ -4728,6 +4789,7 @@ a.tag-mark {
   right: 0;
   z-index: 30;
   width: 22rem;
+  max-width: calc(100vw - 1.5rem);
   max-height: 19rem;
   overflow-y: auto;
   margin: 0;

data/app/views/layouts/completion_kit/application.html.erb

@@ -17,6 +17,10 @@
     <div class="ck-wrap ck-topbar__inner">
       <%= link_to (main_app.respond_to?(:root_path) ? main_app.root_path : prompts_path), class: "ck-brand" do %><%= image_tag "completion_kit/logo.png", alt: "CompletionKit", style: "height: 64px; width: auto;" %><span class="ck-brand__name">Completion<span class="ck-brand__kit">Kit</span></span><% end %>
 
+      <details class="ck-nav-menu">
+        <summary class="ck-nav-menu__trigger" aria-label="Menu">
+          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+        </summary>
       <nav class="ck-nav">
         <% active = ->(path) { request.path.start_with?(path) ? ck_button_classes(:dark) : ck_button_classes(:light, variant: :outline) } %>
         <%= link_to "Prompts", prompts_path, class: active.(prompts_path) %>
@@ -39,6 +43,7 @@
           <%= button_to "Log out", main_app.logout_path, method: :delete, class: ck_button_classes(:light, variant: :outline) %>
         <% end %>
       </nav>
+      </details>
     </div>
   </header>
 

data/lib/completion_kit/version.rb

@@ -1,3 +1,3 @@
 module CompletionKit
-  VERSION = "0.5.21"
+  VERSION = "0.5.22"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: completion-kit
 version: !ruby/object:Gem::Version
-  version: 0.5.21
+  version: 0.5.22
 platform: ruby
 authors:
 - Damien Bastin