@tstax/coding-tab 0.2.0 → 0.2.2

package/dist/style.css

@@ -19,10 +19,14 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  min-height: 480px;
+  min-height: 0;
+  min-width: 0;
   border-radius: var(--ct-radius);
   overflow: hidden;
   border: 1px solid var(--ct-border);
+  /* iOS Safari sometimes needs an explicit minimum so the inner thread can
+     shrink to viewport width when embedded inside a flex container. */
+  max-width: 100%;
 }
 @media (prefers-color-scheme: light) {
   .coding-tab {
@@ -48,6 +52,7 @@
   border-bottom: 1px solid var(--ct-border);
   background: var(--ct-bg-alt);
   flex-wrap: wrap;
+  min-width: 0;
 }
 .coding-tab__header select,
 .coding-tab__header input,
@@ -66,12 +71,14 @@
   align-items: center;
   justify-content: center;
   padding: 4px 7px;
+  flex-shrink: 0;
 }
 .coding-tab__mode {
   display: inline-flex;
   border: 1px solid var(--ct-border);
   border-radius: 6px;
   overflow: hidden;
+  flex-shrink: 0;
 }
 .coding-tab__mode button {
   border: 0;
@@ -98,6 +105,7 @@
   font-size: 0.92em;
   flex: 0 1 auto;
   min-width: 0;
+  max-width: 100%;
 }
 .coding-tab__repo-locked:hover { border-color: var(--ct-accent); color: var(--ct-fg); }
 .coding-tab__repo-locked span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -108,8 +116,10 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  min-width: 0;
 }
-.coding-tab__user img { width: 22px; height: 22px; border-radius: 50%; }
+.coding-tab__user img { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
+.coding-tab__user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
 .coding-tab__user button {
   background: transparent;
   border: 0;
@@ -117,6 +127,7 @@
   cursor: pointer;
   padding: 2px 6px;
   border-radius: 4px;
+  flex-shrink: 0;
 }
 .coding-tab__user button:hover { color: var(--ct-fg); background: var(--ct-bg); }
 
@@ -125,6 +136,8 @@
   flex: 1;
   display: flex;
   min-height: 0;
+  min-width: 0;
+  position: relative;
 }
 .coding-tab__sidebar {
   width: 240px;
@@ -134,6 +147,7 @@
   border-right: 1px solid var(--ct-border);
   background: var(--ct-bg-alt);
   overflow: hidden;
+  min-width: 0;
 }
 .coding-tab__new-chat {
   display: inline-flex;
@@ -149,6 +163,7 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
+  min-width: 0;
 }
 .coding-tab__chat-empty {
   font-size: 12px;
@@ -162,6 +177,7 @@
   border-radius: 6px;
   overflow: hidden;
   transition: background 0.1s;
+  min-width: 0;
 }
 .coding-tab__chat-row:hover { background: var(--ct-bg-row); }
 .coding-tab__chat-row.is-active { background: var(--ct-bg-row); }
@@ -205,6 +221,7 @@
   align-items: center;
   padding-right: 6px;
   gap: 2px;
+  flex-shrink: 0;
 }
 .coding-tab__chat-row:hover .coding-tab__chat-row-actions,
 .coding-tab__chat-row.is-active .coding-tab__chat-row-actions {
@@ -227,8 +244,14 @@
   flex: 1;
   display: flex;
   flex-direction: column;
+  /* CRITICAL: without this, any wide child (long URL in tool args, code block,
+     overflowing pre) blows out the flex container width and forces the whole
+     thread to scroll horizontally — making text wrap word-by-word in the tiny
+     visible strip. */
   min-width: 0;
+  min-height: 0;
   background: var(--ct-bg);
+  overflow: hidden;
 }
 .coding-tab__pane-empty {
   margin: auto;
@@ -257,20 +280,46 @@
     box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3);
   }
   .coding-tab__sidebar.is-open { transform: translateX(0); }
-  .coding-tab__body { position: relative; }
+  /* Compact the repo pill to icon-only on mobile — keeps the one-tap link to
+     GitHub (so users can open PRs themselves) without crowding the header. */
+  .coding-tab__repo-locked {
+    padding: 6px 8px;
+    border-radius: 6px;
+    flex-shrink: 0;
+  }
+  .coding-tab__repo-locked span { display: none; }
+  /* Collapse the user block to just avatar + sign-out, drop the @login text. */
+  .coding-tab__user-name { display: none; }
+  .coding-tab__user { gap: 4px; }
+  .coding-tab__header { gap: 6px; padding: 6px 10px; }
+  .coding-tab__header select { max-width: 130px; }
+}
+
+@media (max-width: 480px) {
+  .coding-tab__user img { display: none; }
+  .coding-tab__user button { padding: 4px 8px; font-size: 11px; }
 }
 
 /* ───────── thread / messages ───────── */
 .coding-tab__thread {
   flex: 1;
   overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 14px;
+  min-width: 0;
 }
 
-.coding-tab__msg { display: flex; flex-direction: column; gap: 4px; }
+.coding-tab__msg {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  max-width: 100%;
+}
 .coding-tab__msg-role {
   font-size: 11px;
   text-transform: uppercase;
@@ -283,9 +332,12 @@
   border-radius: 8px;
   padding: 10px 12px;
   word-wrap: break-word;
+  overflow-wrap: anywhere;
   display: flex;
   flex-direction: column;
   gap: 8px;
+  min-width: 0;
+  max-width: 100%;
 }
 .coding-tab__msg.user .coding-tab__msg-body {
   background: var(--ct-accent);
@@ -295,6 +347,7 @@
   max-width: 85%;
   white-space: pre-wrap;
   display: block;
+  word-break: break-word;
 }
 .coding-tab__msg.user { align-items: flex-end; }
 .coding-tab__msg-pending {
@@ -302,8 +355,14 @@
   font-style: italic;
 }
 
+@media (max-width: 720px) {
+  .coding-tab__thread { padding: 12px; gap: 12px; }
+  .coding-tab__msg-body { padding: 9px 11px; }
+  .coding-tab__msg.user .coding-tab__msg-body { max-width: 92%; }
+}
+
 /* ───────── markdown ───────── */
-.coding-tab__md { display: block; }
+.coding-tab__md { display: block; min-width: 0; max-width: 100%; }
 .coding-tab__md > * + * { margin-top: 8px; }
 .coding-tab__md p { margin: 0; }
 .coding-tab__md h1,
@@ -313,6 +372,7 @@
   margin: 4px 0 4px;
   font-weight: 600;
   line-height: 1.25;
+  word-break: break-word;
 }
 .coding-tab__md h1 { font-size: 1.3em; }
 .coding-tab__md h2 { font-size: 1.18em; border-bottom: 1px solid var(--ct-border); padding-bottom: 4px; }
@@ -340,6 +400,7 @@
   border-radius: 4px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 0.9em;
+  word-break: break-word;
 }
 .coding-tab__md pre {
   background: rgba(127, 127, 127, 0.12);
@@ -347,18 +408,23 @@
   border-radius: 6px;
   padding: 10px 12px;
   margin: 0;
+  max-width: 100%;
   overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 .coding-tab__md pre code {
   background: transparent;
   padding: 0;
   font-size: 0.88em;
   line-height: 1.45;
+  word-break: normal;
+  white-space: pre;
 }
 .coding-tab__md a {
   color: var(--ct-accent);
   text-decoration: underline;
   text-underline-offset: 2px;
+  word-break: break-all;
 }
 
 /* ───────── tool calls (expandable) ───────── */
@@ -369,6 +435,8 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 12px;
   overflow: hidden;
+  min-width: 0;
+  max-width: 100%;
 }
 .coding-tab__tool-header {
   width: 100%;
@@ -382,6 +450,7 @@
   cursor: pointer;
   text-align: left;
   font: inherit;
+  min-width: 0;
 }
 .coding-tab__tool-header:hover { background: rgba(127, 127, 127, 0.08); }
 .coding-tab__tool-dot {
@@ -414,6 +483,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0;
+  flex: 1 1 auto;
 }
 .coding-tab__tool-detail {
   padding: 8px 12px 10px;
@@ -422,8 +492,10 @@
   flex-direction: column;
   gap: 8px;
   background: rgba(127, 127, 127, 0.04);
+  min-width: 0;
+  max-width: 100%;
 }
-.coding-tab__tool-section { display: flex; flex-direction: column; gap: 4px; }
+.coding-tab__tool-section { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
 .coding-tab__tool-label {
   font-size: 10px;
   letter-spacing: 0.05em;
@@ -437,9 +509,14 @@
   border: 1px solid var(--ct-border);
   border-radius: 4px;
   max-height: 360px;
+  max-width: 100%;
   overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  /* Wrap long lines within the visible width so they don't push the parent
+     wider on mobile; horizontal scroll still works for monolithic code. */
   white-space: pre-wrap;
   word-break: break-word;
+  overflow-wrap: anywhere;
   font-size: 11px;
   line-height: 1.4;
 }
@@ -451,6 +528,13 @@
   font-style: italic;
 }
 
+@media (max-width: 720px) {
+  .coding-tab__tool { font-size: 11.5px; }
+  .coding-tab__tool-header { padding: 7px 8px; gap: 6px; }
+  .coding-tab__tool-detail { padding: 6px 8px 8px; }
+  .coding-tab__tool-detail pre { max-height: 240px; padding: 6px 8px; font-size: 10.5px; }
+}
+
 @keyframes ct-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
 
 /* ───────── plan + PR + composer ───────── */
@@ -458,6 +542,7 @@
   display: flex;
   gap: 8px;
   margin-top: 4px;
+  flex-wrap: wrap;
 }
 .coding-tab__btn {
   font: inherit;
@@ -470,11 +555,30 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  position: relative;
+  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
 }
 .coding-tab__btn:hover { border-color: var(--ct-accent); }
 .coding-tab__btn.primary { background: var(--ct-accent); color: var(--ct-accent-fg); border-color: transparent; }
 .coding-tab__btn.danger { color: var(--ct-danger); }
-.coding-tab__btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.coding-tab__btn.success { background: var(--ct-success); color: var(--ct-accent-fg); border-color: transparent; }
+.coding-tab__btn:disabled { opacity: 0.6; cursor: not-allowed; }
+.coding-tab__btn[data-state="loading"] { padding-left: 30px; }
+.coding-tab__btn[data-state="loading"]::before {
+  content: "";
+  position: absolute;
+  left: 12px; top: 50%;
+  width: 12px; height: 12px;
+  margin-top: -6px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: ct-spin 0.7s linear infinite;
+  opacity: 0.85;
+}
+@keyframes ct-spin {
+  to { transform: rotate(360deg); }
+}
 
 .coding-tab__pr {
   margin-top: 4px;
@@ -485,12 +589,42 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
+  min-width: 0;
+  max-width: 100%;
 }
 .coding-tab__pr-title {
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 6px;
+  flex-wrap: wrap;
+  word-break: break-word;
+}
+.coding-tab__pr-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.coding-tab__pr-status {
+  font-size: 12px;
+  color: var(--ct-fg-dim);
+  font-style: italic;
+}
+.coding-tab__pr-status.is-success { color: var(--ct-success); font-style: normal; }
+.coding-tab__pr-status.is-error { color: var(--ct-danger); font-style: normal; }
+
+/* Branch fallback card — shown when commits were pushed but Cursor's auto-PR
+   tool didn't open a PR. Visually distinct from a real PR card so the user
+   sees the difference at a glance. */
+.coding-tab__pr--branch {
+  border-style: dashed;
+  background: rgba(255, 159, 67, 0.06);
+}
+.coding-tab__pr--branch .coding-tab__pr-title code {
+  background: rgba(127, 127, 127, 0.18);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 12px;
 }
 
 .coding-tab__composer {
@@ -499,9 +633,11 @@
   padding: 10px 12px;
   border-top: 1px solid var(--ct-border);
   background: var(--ct-bg-alt);
+  min-width: 0;
 }
 .coding-tab__composer textarea {
   flex: 1;
+  min-width: 0;
   min-height: 44px;
   max-height: 200px;
   resize: vertical;
@@ -512,7 +648,13 @@
   border-radius: 6px;
   padding: 8px 10px;
 }
-.coding-tab__composer button { align-self: flex-end; }
+.coding-tab__composer button { align-self: flex-end; flex-shrink: 0; }
+
+@media (max-width: 720px) {
+  .coding-tab__composer { padding: 8px 10px; gap: 6px; }
+  .coding-tab__composer textarea { font-size: 16px; /* iOS won't auto-zoom inputs >= 16px */ }
+  .coding-tab__btn { padding: 7px 12px; }
+}
 
 /* ───────── sign in / notices ───────── */
 .coding-tab__signin {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tstax/coding-tab",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Drop-in Cursor-style coding agent tab for any Express app. Multiple persistent chats, plan/agent modes, in-line tool inspection, GitHub OAuth, opens PRs against your repo via the Cursor SDK cloud runtime.",
   "type": "module",
   "exports": {