completion-kit 0.5.24 → 0.5.26

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 40c107320c801c5cfcb008355620aadb4bf8ec4776113f52dd5e2d5c130a2ce8
-  data.tar.gz: 840088253b8efcd92163e858f4d95783889007c6b9c32662db3a1004225462a9
+  metadata.gz: 312676093066234886bea6d8cb908e669d045dfdb02660b2872266c6baeb3e59
+  data.tar.gz: '0974b8805e344059b9c063d7979b61ab9c08b2182a5438f230386d2244b29d91'
 SHA512:
-  metadata.gz: b5efc624e8fe825ac927ec9bb87ffbc750e7862ec8aeb064a830d3f4b585136119db33a3f3d41a6064fb60db05fd93675bff9cb5b71007e9aea7722d79e6bdd6
-  data.tar.gz: d664c0f3e623ba91750f2752b60b4f2bc147a08f8287558f3cff466a7da5d60242d8275db63e15c10ea818fe5fe6f2dc4066ff85a138383c2e10e6cdd2b79ace
+  metadata.gz: 2ab3528c3521917d7309bb95b8639645e17cfa28b250245cf33eefd6d9220548c7424592180ab6c911ae2bf181a5443a77395f8e4434e1c9043510fa67827ba9
+  data.tar.gz: 6b8ae35b53a6a82d164155978a324f1915211153818b90e53e808d1d6368f7345e27a1fef185c98f275d9f729c654f48e21dd83811c325e138abb96d72d42062

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

@@ -2837,6 +2837,19 @@ select.ck-input {
     box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
     z-index: 50;
   }
+
+  /* Dashboard prompt-changes row stacks instead of cramming the name into
+     a few characters. */
+  .ck-improvement {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.3rem;
+  }
+  .ck-improvement__name { white-space: normal; }
+  .ck-improvement__delta { min-width: 0; text-align: left; }
+
+  /* Onboarding's decorative field bleeds ±3rem past the page — clip it. */
+  .ck-launch { overflow-x: clip; }
 }
 
 .ck-api-endpoint {
@@ -2911,6 +2924,10 @@ select.ck-input {
 
 .ck-token-toggle {
   transition: border-color 0.15s, color 0.15s;
+  max-width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-align: left;
 }
 
 .ck-token-toggle:hover {
@@ -3010,6 +3027,13 @@ select.ck-input {
     grid-template-columns: 1fr;
   }
 
+  /* Without this the nav and panels keep their min-content width and spill
+     past the single grid column — clipped by .ck-api-tabs' overflow:hidden. */
+  .ck-api-tabs__nav,
+  .ck-api-tabs__panels {
+    min-width: 0;
+  }
+
   .ck-api-tabs__nav {
     flex-direction: row;
     flex-wrap: wrap;
@@ -3605,6 +3629,84 @@ table.ck-runs-table {
   white-space: nowrap;
 }
 
+/* List tables on a phone. A 4–6 column table can't fit a phone width, so each
+   row becomes a stacked block — every cell on its own line, all content
+   visible, nothing scrolling sideways and getting clipped. Placed after the
+   base table rules so it wins on source order; the runs table overrides this
+   with a tailored layout in the block below. */
+@media (max-width: 640px) {
+  .ck-results-table,
+  .ck-results-table tbody,
+  .ck-results-table tr,
+  .ck-results-table td {
+    display: block;
+  }
+  .ck-results-table { overflow: hidden; }
+  .ck-results-table thead { display: none; }
+  .ck-results-table tr { padding: 0.85rem 0.3rem; }
+  .ck-results-table td {
+    width: auto !important;
+    max-width: 100%;
+    white-space: normal !important;
+    padding: 0.3rem 0.3rem 0;
+  }
+  .ck-results-table td:first-child { padding-top: 0; }
+  .ck-results-table td:empty { display: none; }
+  .ck-results-table td.ck-results-table__arrow { display: none; }
+  /* Each stacked cell carries the column name as a small label so a bare
+     value ("10", "May 14") still reads clearly. */
+  .ck-results-table td[data-label]::before {
+    content: attr(data-label);
+    display: block;
+    margin-bottom: 0.12rem;
+    font-family: var(--ck-mono);
+    font-size: 0.62rem;
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+    color: var(--ck-dim);
+  }
+}
+
+/* Runs table on a phone. Placed after the base .ck-runs-table rules so these
+   win on source order. A 6-column table can't fit a phone, so each run row
+   becomes a stacked block: the run name + sub-line take the full width on
+   top, and the score / timestamp / arrow flow in a row beneath. The two
+   secondary numeric columns (responses, metrics) are dropped — they live on
+   the run's own page. */
+@media (max-width: 640px) {
+  table.ck-runs-table { display: block; overflow-x: visible; }
+  .ck-runs-table thead { display: none; }
+  .ck-runs-table tbody { display: block; }
+  .ck-runs-table tr {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.45rem 0.9rem;
+    padding: 0.9rem 0;
+  }
+  .ck-runs-table td {
+    display: block;
+    padding: 0;
+  }
+  .ck-runs-table td:first-child { flex: 1 1 100%; }
+  .ck-runs-table td:nth-child(2),
+  .ck-runs-table td:nth-child(3) { display: none; }
+  /* width overrides need column-level specificity to beat the base rules
+     (the timestamp column otherwise keeps its desktop width: 1%). */
+  .ck-runs-table td:first-child,
+  .ck-runs-table td:nth-child(4),
+  .ck-runs-table td:nth-child(5),
+  .ck-runs-table td:last-child,
+  .ck-runs-table td:has(time[data-relative-time]) { width: auto; }
+  .ck-runs-table__identity { width: auto; }
+  .ck-runs-table .ck-run-name strong {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+  }
+  .ck-runs-table__config { white-space: normal; }
+}
+
 .ck-response-cell__index {
   font-family: var(--ck-mono);
   font-size: 0.78rem;
@@ -3681,6 +3783,8 @@ table.ck-runs-table {
   border-radius: var(--ck-radius);
   border: 1px solid var(--ck-line);
   user-select: all;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
 .ck-prompt-preview__text {
@@ -4843,3 +4947,17 @@ a.tag-mark {
   color: var(--ck-dim);
   font-size: 0.7rem;
 }
+
+/* On a phone the popover is anchored to a small mid-footer toggle, so a
+   near-full-width panel spills off the left edge and clips the metric
+   names. Pin it to the bottom of the viewport instead — a bottom sheet
+   that spans the screen and can never clip. */
+@media (max-width: 640px) {
+  .ck-flyout__panel {
+    position: fixed;
+    inset: auto 0.75rem 0.75rem 0.75rem;
+    width: auto;
+    max-width: none;
+    max-height: 60vh;
+  }
+}

data/app/views/completion_kit/datasets/index.html.erb

@@ -35,9 +35,9 @@
               </div>
             <% end %>
           </td>
-          <td><%= dataset.row_count %></td>
-          <td><%= dataset.runs.count %></td>
-          <td class="ck-meta-copy"><time datetime="<%= dataset.created_at.iso8601 %>"><%= dataset.created_at.strftime("%b %-d, %Y") %></time></td>
+          <td data-label="Rows"><%= dataset.row_count %></td>
+          <td data-label="Used in"><%= dataset.runs.count %></td>
+          <td data-label="Created" class="ck-meta-copy"><time datetime="<%= dataset.created_at.iso8601 %>"><%= dataset.created_at.strftime("%b %-d, %Y") %></time></td>
           <td class="ck-results-table__arrow">&rarr;</td>
         </tr>
       <% end %>

data/app/views/completion_kit/metric_groups/index.html.erb

@@ -39,8 +39,8 @@
               </div>
             <% end %>
           </td>
-          <td class="ck-meta-copy"><div class="ck-clamp-2"><%= metric_group.description.presence || "—" %></div></td>
-          <td>
+          <td data-label="Description" class="ck-meta-copy"><div class="ck-clamp-2"><%= metric_group.description.presence || "—" %></div></td>
+          <td data-label="Members">
             <% if metric_group.metrics.any? %>
               <div class="ck-mg-members">
                 <% metric_group.metrics.each do |m| %>

data/app/views/completion_kit/metrics/index.html.erb

@@ -34,8 +34,8 @@
               </div>
             <% end %>
           </td>
-          <td class="ck-meta-copy"><div class="ck-clamp-2"><%= metric.instruction.presence || "—" %></div></td>
-          <td>
+          <td data-label="Instruction" class="ck-meta-copy"><div class="ck-clamp-2"><%= metric.instruction.presence || "—" %></div></td>
+          <td data-label="In groups">
             <% groups = metric.metric_groups %>
             <% if groups.any? %>
               <div class="ck-metrics-table__groups">

data/app/views/completion_kit/runs/_response_row.html.erb

@@ -9,7 +9,7 @@
       <%= truncate(response.response_text.to_s, length: 160) %>
     <% end %>
   </td>
-  <td>
+  <td data-label="Metrics">
     <% scored_reviews = response.reviews.select { |r| r.ai_score.present? }.sort_by { |r| r.metric_name.to_s.downcase } %>
     <% if scored_reviews.any? %>
       <span class="ck-metric-bar ck-metric-bar--compact">
@@ -24,14 +24,14 @@
       <span class="ck-response-cell__dim">—</span>
     <% end %>
   </td>
-  <td>
+  <td data-label="Avg score">
     <% if response.reviewed? %>
       <span class="<%= ck_badge_classes(ck_score_kind(response.score.to_f)) %>"><%= response.score %></span>
     <% else %>
       <span class="ck-response-cell__dim">—</span>
     <% end %>
   </td>
-  <td>
+  <td data-label="Status">
     <% case response.status
        when "pending" %>
       <span class="ck-chip">Queued</span>

data/app/views/completion_kit/tags/index.html.erb

@@ -26,7 +26,7 @@
         <% breakdown = by_type.map { |(_, type), n| pluralize(n, type.demodulize.titleize.downcase) }.join(" · ") %>
         <tr onclick="window.location='<%= edit_tag_path(tag) %>'" style="cursor: pointer;">
           <td><span class="tag-mark tag-mark--lg" style="--mark-color: var(--tag-<%= tag.color %>);"><%= tag.name %></span></td>
-          <td class="ck-meta-copy">
+          <td data-label="Applied to" class="ck-meta-copy">
             <% if count.zero? %>
               <span class="ck-tags-table__unused">Not used yet</span>
             <% else %>

data/lib/completion_kit/version.rb

@@ -1,3 +1,3 @@
 module CompletionKit
-  VERSION = "0.5.24"
+  VERSION = "0.5.26"
 end

metadata

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