completion-kit 0.5.20 → 0.5.22

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b8563167a68aab93caf0e05022c5f1216d096eaae162173e39c5061ba253f3e0
-  data.tar.gz: 7de1eb04e23d658744195330b7d3f0383d9c02c5e3d3a78788aaf96bc9a0d1b0
+  metadata.gz: 3849ee4680223b7e395bf66c8bf99c69fe58e297571d82c7d0e4785c6f20e9ff
+  data.tar.gz: 66a2b835cd71061fba1587d27d37b7729c996f4218514ad33e5046c265598703
 SHA512:
-  metadata.gz: 0ad34abea12f77b56701f313aa471193e384698a0a2add21724510f210018ee86de287d7fc449df5574a0d9ca12c90883c16d8170b53f254852659b9c4e76ca1
-  data.tar.gz: 3b4118ce8416f45bf42dff0a88dbe20f0d2061cf66f456f5070c3dc51c80dc81e400329ea342b476a77fc44aa461ad161d784e8fe3c50e6d8cfff9df3331b042
+  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 {
@@ -4724,36 +4785,42 @@ a.tag-mark {
 .ck-flyout[open] .ck-flyout__toggle { color: var(--ck-text); }
 .ck-flyout__panel {
   position: absolute;
-  bottom: calc(100% + 0.5rem);
+  bottom: calc(100% + 0.6rem);
   right: 0;
   z-index: 30;
-  width: 16rem;
-  max-height: 13rem;
+  width: 22rem;
+  max-width: calc(100vw - 1.5rem);
+  max-height: 19rem;
   overflow-y: auto;
   margin: 0;
-  padding: 0.45rem;
+  padding: 0.6rem;
   list-style: none;
   display: flex;
   flex-direction: column;
-  gap: 0.2rem;
+  gap: 0.3rem;
   background: var(--ck-bg-strong);
   border: 1px solid var(--ck-line-strong);
   border-radius: var(--ck-radius);
-  box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 -16px 34px rgba(0, 0, 0, 0.5);
 }
 .ck-flyout__item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.6rem;
-  padding: 0.3rem 0.4rem;
-  font-size: 0.78rem;
-  border-radius: 5px;
+  gap: 0.9rem;
+  padding: 0.55rem 0.65rem;
+  font-size: 0.82rem;
+  border-radius: 6px;
 }
 .ck-flyout__item:hover { background: var(--ck-surface-hover); }
-.ck-flyout__label { color: var(--ck-text); }
+.ck-flyout__label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  min-width: 0;
+}
+.ck-flyout__name { color: var(--ck-text); }
 .ck-flyout__meta {
-  margin-left: 0.35rem;
   color: var(--ck-dim);
   font-size: 0.7rem;
 }

data/app/views/completion_kit/dashboard/_failures_card.html.erb

@@ -33,7 +33,7 @@
           <ul class="ck-flyout__panel">
             <% ignored_failures.each do |dismissal| %>
               <li class="ck-flyout__item">
-                <span class="ck-flyout__label"><%= dismissal.dismissable_type.demodulize %> #<%= dismissal.dismissable_id %></span>
+                <span class="ck-flyout__label"><span class="ck-flyout__name"><%= dismissal.dismissable_type.demodulize %> #<%= dismissal.dismissable_id %></span></span>
                 <%= button_to completion_kit.dashboard_dismissal_path(dismissal),
                       method: :delete, class: "ck-icon-btn", title: "Un-ignore",
                       "aria-label": "Un-ignore #{dismissal.dismissable_type.demodulize} #{dismissal.dismissable_id}" do %><%= render "completion_kit/dashboard/eye_icon" %><% end %>

data/app/views/completion_kit/dashboard/_worst_metric_card.html.erb

@@ -29,7 +29,7 @@
           <% ignored_metrics.each do |dismissal| %>
             <li class="ck-flyout__item">
               <span class="ck-flyout__label">
-                <%= dismissal.dismissable.name %>
+                <span class="ck-flyout__name"><%= dismissal.dismissable.name %></span>
                 <% if dismissal.baseline_score %>
                   <span class="ck-flyout__meta">baseline <%= dismissal.baseline_score %></span>
                 <% end %>

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.20"
+  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.20
+  version: 0.5.22
 platform: ruby
 authors:
 - Damien Bastin