@tangle-network/ui 11.16.8 → 11.16.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.16.9
+
+### Patch Changes
+
+- 272704e: On a phone, terminal output keeps its own lines and scrolls sideways inside the block, so listing columns stay aligned and hashes and URLs are not split mid-token. A closed command shows at most two lines at every width.
+
 ## 11.16.8
 
 ### Patch Changes

package/dist/tool-previews/command-preview.d.ts

@@ -19,6 +19,10 @@ export interface CommandPreviewProps {
  * dark terminal. It scopes the dark token set onto itself with
  * `data-theme="dark"`, so stderr, the badges and the muted prompt keep the
  * contrast they were designed with on a dark ground, in a light console too.
+ *
+ * On a phone the output keeps its own lines and scrolls sideways inside the
+ * block: wrapped output breaks the columns of a listing and splits hashes
+ * and URLs mid-token. The command still wraps between its tokens.
  */
 export declare const CommandPreview: import("react").MemoExoticComponent<({ part, defaultExpanded, className }: CommandPreviewProps) => import("react").JSX.Element>;
 //#endregion

package/dist/tool-previews/command-preview.js

@@ -162,6 +162,10 @@ function CommandText({ command, all }) {
 * dark terminal. It scopes the dark token set onto itself with
 * `data-theme="dark"`, so stderr, the badges and the muted prompt keep the
 * contrast they were designed with on a dark ground, in a light console too.
+*
+* On a phone the output keeps its own lines and scrolls sideways inside the
+* block: wrapped output breaks the columns of a listing and splits hashes
+* and URLs mid-token. The command still wraps between its tokens.
 */
 const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 	const [expanded, setExpanded] = useState(defaultExpanded);
@@ -179,7 +183,7 @@ const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 			children: "$"
 		}),
 		/* @__PURE__ */ jsx("code", {
-			className: cn("min-w-0 flex-1 whitespace-pre-wrap [overflow-wrap:anywhere]", expanded ? "" : "line-clamp-2"),
+			className: cn("min-w-0 flex-1 whitespace-pre-wrap [overflow-wrap:anywhere]", expanded ? "" : "max-h-8 overflow-hidden"),
 			children: /* @__PURE__ */ jsx(CommandText, {
 				command,
 				all: expanded
@@ -222,21 +226,21 @@ const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 					tabIndex: 0,
 					role: "region",
 					"aria-label": "stdout",
-					className: cn("max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] px-3 py-2 leading-relaxed", focusRing),
+					className: cn("max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] max-sm:whitespace-pre max-sm:[overflow-wrap:normal] px-3 py-2 leading-relaxed", focusRing),
 					children: output.stdout
 				}) : null,
 				output.stderr ? /* @__PURE__ */ jsx("pre", {
 					tabIndex: 0,
 					role: "region",
 					"aria-label": "stderr",
-					className: cn("max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]", focusRing),
+					className: cn("max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] max-sm:whitespace-pre max-sm:[overflow-wrap:normal] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]", focusRing),
 					children: output.stderr
 				}) : null,
 				errorText ? /* @__PURE__ */ jsx("pre", {
 					tabIndex: 0,
 					role: "region",
 					"aria-label": "error",
-					className: cn("max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]", focusRing),
+					className: cn("max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] max-sm:whitespace-pre max-sm:[overflow-wrap:normal] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]", focusRing),
 					children: errorText
 				}) : null
 			]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.16.8",
+  "version": "11.16.9",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/tool-previews/command-preview.tsx

@@ -227,6 +227,10 @@ function CommandText({ command, all }: { command: string; all: boolean }) {
  * dark terminal. It scopes the dark token set onto itself with
  * `data-theme="dark"`, so stderr, the badges and the muted prompt keep the
  * contrast they were designed with on a dark ground, in a light console too.
+ *
+ * On a phone the output keeps its own lines and scrolls sideways inside the
+ * block: wrapped output breaks the columns of a listing and splits hashes
+ * and URLs mid-token. The command still wraps between its tokens.
  */
 export const CommandPreview = memo(
   ({ part, defaultExpanded = false, className }: CommandPreviewProps) => {
@@ -258,7 +262,10 @@ export const CommandPreview = memo(
         <code
           className={cn(
             "min-w-0 flex-1 whitespace-pre-wrap [overflow-wrap:anywhere]",
-            expanded ? "" : "line-clamp-2",
+            // Closed, two lines of the command. A height cap, not
+            // line-clamp: each token is an inline box, which line-clamp
+            // does not count, so a phone showed three lines and more.
+            expanded ? "" : "max-h-8 overflow-hidden",
           )}
         >
           <CommandText command={command} all={expanded} />
@@ -319,7 +326,7 @@ export const CommandPreview = memo(
                 role="region"
                 aria-label="stdout"
                 className={cn(
-                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] px-3 py-2 leading-relaxed",
+                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] max-sm:whitespace-pre max-sm:[overflow-wrap:normal] px-3 py-2 leading-relaxed",
                   focusRing,
                 )}
               >
@@ -332,7 +339,7 @@ export const CommandPreview = memo(
                 role="region"
                 aria-label="stderr"
                 className={cn(
-                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] max-sm:whitespace-pre max-sm:[overflow-wrap:normal] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
                   focusRing,
                 )}
               >
@@ -345,7 +352,7 @@ export const CommandPreview = memo(
                 role="region"
                 aria-label="error"
                 className={cn(
-                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] max-sm:whitespace-pre max-sm:[overflow-wrap:normal] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
                   focusRing,
                 )}
               >