@tangle-network/sandbox-ui 0.134.11 → 0.135.0

package/dist/globals.css

@@ -283,6 +283,9 @@
     white-space: nowrap;
     border-width: 0;
   }
+  .\!fixed {
+    position: fixed !important;
+  }
   .absolute {
     position: absolute;
   }
@@ -298,6 +301,9 @@
   .sticky {
     position: sticky;
   }
+  .\!inset-3 {
+    inset: calc(var(--spacing) * 3) !important;
+  }
   .inset-0 {
     inset: 0px;
   }
@@ -433,6 +439,9 @@
   .\!z-10 {
     z-index: 10 !important;
   }
+  .\!z-40 {
+    z-index: 40 !important;
+  }
   .z-0 {
     z-index: 0;
   }
@@ -712,6 +721,9 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 6;
   }
+  .\!hidden {
+    display: none !important;
+  }
   .block {
     display: block;
   }
@@ -826,6 +838,9 @@
   .\!h-2\.5 {
     height: calc(var(--spacing) * 2.5) !important;
   }
+  .\!h-auto {
+    height: auto !important;
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }
@@ -940,6 +955,9 @@
   .h-\[34rem\] {
     height: 34rem;
   }
+  .h-\[36rem\] {
+    height: 36rem;
+  }
   .h-\[72\%\] {
     height: 72%;
   }
@@ -1186,6 +1204,9 @@
   .\!w-2\.5 {
     width: calc(var(--spacing) * 2.5) !important;
   }
+  .\!w-auto {
+    width: auto !important;
+  }
   .w-0 {
     width: 0px;
   }
@@ -1348,6 +1369,9 @@
   .w-\[268px\] {
     width: 268px;
   }
+  .w-\[358px\] {
+    width: 358px;
+  }
   .w-\[360px\] {
     width: 360px;
   }
@@ -1381,6 +1405,9 @@
   .w-\[1000px\] {
     width: 1000px;
   }
+  .w-\[1100px\] {
+    width: 1100px;
+  }
   .w-\[calc\(100vw-32px\)\] {
     width: calc(100vw - 32px);
   }
@@ -2976,6 +3003,12 @@
       background-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);
     }
   }
+  .bg-primary\/\[0\.04\] {
+    background-color: hsl(var(--primary));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--primary)) 4%, transparent);
+    }
+  }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
@@ -3963,6 +3996,12 @@
       color: color-mix(in oklab, hsl(var(--primary)) 70%, transparent);
     }
   }
+  .text-primary\/80 {
+    color: hsl(var(--primary));
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, hsl(var(--primary)) 80%, transparent);
+    }
+  }
   .text-red-400 {
     color: var(--color-red-400);
   }
@@ -4065,6 +4104,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.2\)\] {
     --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.2));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5572,6 +5615,9 @@
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
     }
+    .sm\:\!block {
+      display: block !important;
+    }
     .sm\:flex {
       display: flex;
     }

package/dist/hooks.js

@@ -1,4 +1,4 @@
-import { t as usePtySession } from "./use-pty-session-Bf4hBLXJ.js";
+import { t as usePtySession } from "./use-pty-session-B5Q_i9RI.js";
 import { i as useSessionStream, n as SESSION_STREAM_RECONNECT_DELAY_MS, r as SessionStreamError, t as useSidecarAuth } from "./use-sidecar-auth-DkdcufOz.js";
 import * as React$1 from "react";
 import { RealtimeSessionRegistry, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useLiveTime, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from "@tangle-network/ui/hooks";

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as computeDiffStats, c as BRAND_PRISM_THEME, d as DiffStatsBadge, f as GitStatusBadge, i as buildUnifiedPatch, l as CodeSurface, m as PillTabs, n as SandboxArtifactPane, o as CodeView, p as PanelHeader, r as DiffView, s as FileBreadcrumb, t as ChangesPane, u as resolveLanguage } from "./workbench-QHNLHsoL.js";
+import { a as computeDiffStats, c as BRAND_PRISM_THEME, d as DiffStatsBadge, f as GitStatusBadge, i as buildUnifiedPatch, l as CodeSurface, m as PillTabs, n as SandboxArtifactPane, o as CodeView, p as PanelHeader, r as DiffView, s as FileBreadcrumb, t as ChangesPane, u as resolveLanguage } from "./workbench-BzXAYUId.js";
 import { $ as DialogClose, $n as TooltipProvider, $t as SelectScrollUpButton, A as Chip, An as TableCell, At as InlineCode, B as ContextMenuLabel, Bt as PopoverClose, C as Card, Cn as StatCard, Ct as DropdownMenuTrigger, D as CardHeader, Dn as Table, Dt as Heading, E as CardFooter, En as TONE_CLASSES, Et as FilterField, F as ContextMenu, Fn as Tabs, Ft as PageHeader, G as ContextMenuShortcut, Gn as Textarea, Gt as RadioGroupItem, H as ContextMenuRadioGroup, Ht as PopoverTrigger, I as ContextMenuCheckboxItem, In as TabsContent, It as PageShell, J as ContextMenuSubTrigger, Jn as ToastContainer, Jt as SelectContent, K as ContextMenuSub, Kn as ThemeToggle, Kt as SegmentedControl, L as ContextMenuContent, Ln as TabsList, Lt as Pagination, M as Collapsible, Mn as TableHead, Mt as Label, N as CollapsibleContent, Nn as TableHeader, Nt as Metric, O as CardTitle, On as TableBody, Ot as HelpText, P as CollapsibleTrigger, Pn as TableRow, Pt as MetricStrip, Q as Dialog, Qn as TooltipContent, Qt as SelectScrollDownButton, R as ContextMenuGroup, Rn as TabsTrigger, Rt as Popover, S as Calendar, Sn as Slider, St as DropdownMenuSubTrigger, T as CardDescription, Tn as Switch, Tt as Field, U as ContextMenuRadioItem, Ut as Progress, V as ContextMenuPortal, Vn as TerminalDisplay, Vt as PopoverContent, W as ContextMenuSeparator, Wn as TextShimmer, Wt as RadioGroup, X as CopyButton, Xn as Toolbar, Xt as SelectItem, Y as ContextMenuTrigger, Yn as ToastProvider, Yt as SelectGroup, Z as DatePicker, Zn as Tooltip, Zt as SelectLabel, _ as AvatarFallback, _n as SheetTrigger, _t as DropdownMenuRadioItem, a as AlertDialogCancel, an as SettingsListItem, ar as buttonVariants, at as DialogPortal, b as Button, bn as SkeletonCard, bt as DropdownMenuSub, c as AlertDialogFooter, cn as Sheet, cr as initialsOf, ct as DropZone, d as AlertDialogPortal, dn as SheetDescription, dr as toneFor, dt as DropdownMenuContent, en as SelectSeparator, er as TooltipTrigger, et as DialogContent, f as AlertDialogTitle, fn as SheetFooter, fr as useTheme, ft as DropdownMenuGroup, g as Avatar, gn as SheetTitle, gr as TangleKnot, gt as DropdownMenuRadioGroup, hn as SheetPortal, hr as Logo, ht as DropdownMenuPortal, i as AlertDialogAction, in as SettingsList, ir as badgeVariants, it as DialogOverlay, j as CodeBlock, jn as TableFooter, jt as Input, k as Checkbox, kn as TableCaption, kt as IconTile, l as AlertDialogHeader, ln as SheetClose, lr as localToday, lt as DropdownMenu, m as AlertTitle, mn as SheetOverlay, mr as SectionTitle, mt as DropdownMenuLabel, n as AlertDescription, nn as SelectValue, nr as Wizard, nt as DialogFooter, o as AlertDialogContent, on as SettingsRow, or as fieldMessageId, ot as DialogTitle, p as AlertDialogTrigger, pn as SheetHeader, pr as useToast, pt as DropdownMenuItem, q as ContextMenuSubContent, qn as TimeSelect, qt as Select, r as AlertDialog, rn as Separator, rr as WizardStep, rt as DialogHeader, s as AlertDialogDescription, sn as SettingsSection, sr as formatCalendarDate, st as DialogTrigger, t as Alert, tn as SelectTrigger, tr as UploadProgress, tt as DialogDescription, u as AlertDialogOverlay, un as SheetContent, ur as parseCalendarDate, ut as DropdownMenuCheckboxItem, v as AvatarImage, vn as SidebarDropZone, vt as DropdownMenuSeparator, w as CardContent, wn as StatusPill, wt as EmptyState, x as CATEGORY_TONES, xn as SkeletonTable, xt as DropdownMenuSubContent, y as Badge, yn as Skeleton, yt as DropdownMenuShortcut, z as ContextMenuItem, zn as Tag, zt as PopoverAnchor } from "./primitives-CxpjGadw.js";
 import { i as WorkspacePaneHeader, n as SHELL_INSET_GUTTER, r as ShellHeader, t as SHELL_HEADER_HEIGHT } from "./shell-header-CTh3oV_e.js";
 import { C as WorkspaceSurfaceTitle, S as WorkspaceSurfaceFrame, _ as StatusBar, a as TaskBoard, b as WorkspaceLayout, c as createShellShouldRevalidate, d as SESSION_CREATED_EVENT, f as dispatchSessionCreated, g as TerminalPanel, h as RuntimePane, i as CalendarView, l as shellShouldRevalidate, m as formatRelativeAge, n as WorkspaceFilesPane, o as SandboxWorkbench, p as useOptimisticSessionItems, r as ApprovalQueue, s as WorkspaceArtifactView, t as ArtifactPane, u as SessionSidebar, v as StatusBanner, x as WorkspaceSurface, y as DirectoryPane } from "./workspace-BJgSt2WW.js";
@@ -6,7 +6,7 @@ import { i as VaultTree, n as filterFileNodes, r as VAULT_TREE_CHILD_PAGE, t as
 import { $ as useSidebar, A as parseInsufficientBalance, B as SidebarPanel, C as SandboxStatusPill, D as ResourceMeter, E as ResourceSnapshot, F as RailHeader, G as SidebarRailNav, H as SidebarPanelHeader, I as RailModeButton, J as SIDEBAR_PANEL_WIDTH, K as RailTooltip, L as RailSeparator, M as RailButton, N as RailExpandable, O as INSUFFICIENT_BALANCE_CODE, P as RailFlyout, Q as SidebarProvider, R as Sidebar, S as SANDBOX_STATUS, T as ActivityFeed, U as SidebarRail, V as SidebarPanelContent, W as SidebarRailFooter, X as SIDEBAR_RAIL_WIDTH, Y as SIDEBAR_RAIL_LABELED_WIDTH, Z as SIDEBAR_TOTAL_WIDTH, _ as BackendSelector, a as PortsList, b as SandboxCard, c as SystemLogsViewer, d as DashboardLayout, f as HARNESS_OPTIONS, g as HarnessLogo, h as HARNESS_BRAND, i as TemplateCard, j as ProfileAvatar, k as OutOfCreditsModal, l as MetricAreaChart, m as chatCapableHarnesses, n as SnapshotList, o as GitPanel, p as HarnessPicker, q as SIDEBAR_MOBILE_WIDTH, r as ProcessList, s as UsageSummary, t as PromoBanner, u as SidebarLayout, v as SandboxTable, w as sandboxStatus, x as canAdminSandbox, y as NewSandboxCard, z as SidebarContent } from "./dashboard-C1ALa6lw.js";
 import { i as modelBrandFor, n as ProviderMark, r as canonicalModelId, t as ModelBrandStack } from "./model-brand-BSr9on8C.js";
 import { a as formatPrice, i as PricingPage, n as SandboxPageShell, o as BillingDashboard, r as UsageChart, t as DashboardPageHeader } from "./page-layout-2IRtfx51.js";
-import { t as usePtySession } from "./use-pty-session-Bf4hBLXJ.js";
+import { t as usePtySession } from "./use-pty-session-B5Q_i9RI.js";
 import { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, PdfViewer, RichFileTree, configurePdfViewer, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind } from "./files.js";
 import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-CYb9hevq.js";
 import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./openui.js";

package/dist/{node-output-CHlf3tni.js → node-output-Bs51H68g.js}

@@ -767,10 +767,56 @@ function withConfig(base, cfg) {
 * neither — dropping the envelope would leave the two indistinguishable in the
 * detail view, which is the one place that promises every field.
 */
+/**
+* Title a step by the id its author gave it, when that names it better than
+* its kind does. A graph of a real workflow is mostly the same few kinds — a
+* factory is nine "GitHub" steps and a handful of decisions whose own titles
+* are run-time templates — so titling by kind makes every node look like its
+* neighbour. The author's id ("open-pr", "ship-gate", "monitor-note") is the
+* one name that says what each is FOR.
+*
+* An agent keeps its profile's role ("Factory reviewer"), which already says
+* that; it takes the id only when it has no readable role. A decision keeps a
+* title its author wrote as plain text, and takes the id when that title is a
+* template the graph would show with its `${...}` unresolved. Every other
+* kind takes the id, and what the kind does moves to the subtitle, where the
+* provider's logo still marks it.
+*/
+/** An id the editor minted rather than an author chose: the kind's own slug
+*  (`agent-run`, `integration-invoke-2`) or a positional `step-N`. Titling by
+*  one would only restate the kind, worse. */
+function isMachineStepId(id, kind) {
+	if (/^step-\d+$/.test(id)) return true;
+	if (!kind) return false;
+	const slug = kind.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+	return id === slug || new RegExp(`^${slug}-\\d+$`).test(id);
+}
+function titledByStep(base, rec) {
+	const id = str(rec.id);
+	if (!id || isMachineStepId(id, base.kind)) return base;
+	const role = humanizeIdentifier(id);
+	if (base.kind === "agent.run") return base.title === "AI Agent" ? {
+		...base,
+		title: role
+	} : base;
+	if (base.kind === "decision") {
+		const authored = str(asRecord(rec.decision).title);
+		return authored && !authored.includes("${") ? base : {
+			...base,
+			title: role
+		};
+	}
+	const what = [base.title, base.subtitle].filter(Boolean).join(" · ");
+	return {
+		...base,
+		title: role,
+		...what ? { subtitle: what } : {}
+	};
+}
 function describeAction(action) {
 	const rec = asRecord(action);
 	const kind = actionKind(rec);
-	const base = describeActionBase(action);
+	const base = titledByStep(describeActionBase(action), rec);
 	const config = toJsonSafe(asRecord(kind ? rec[kind] : {}));
 	for (const key of CONTROL_FLOW_KEYS) if (rec[key] !== void 0) config[key] = toJsonSafe(rec[key]);
 	return Object.keys(config).length > 0 ? {
@@ -1228,7 +1274,8 @@ function buildWorkflowGraph(yaml, options) {
 			};
 			addEdge(spec.from, spec.to, "spine", spec.whenLabel);
 		}
-		const rootward = new Set(edges.map((e) => e.target));
+		const loopBack = classifyBackEdges(logical.map((n) => n.id), edges);
+		const rootward = new Set(edges.filter((e) => !loopBack.has(e.id)).map((e) => e.target));
 		for (const n of logical) {
 			if (triggerNodeIndex(n.id) !== null) continue;
 			if (rootward.has(n.id)) continue;
@@ -1252,7 +1299,11 @@ function buildWorkflowGraph(yaml, options) {
 	return {
 		nodes: (options?.wrap && direction === "LR" && !labelled ? layoutSerpentine(logical, edges, rankSep, geo.crossSep) : null) ?? layoutLayers(logical, direction, rankSep, geo.crossSep),
 		edges,
-		error: null
+		error: null,
+		spacing: {
+			rank: rankSep,
+			cross: geo.crossSep
+		}
 	};
 }
 //#endregion
@@ -1328,7 +1379,8 @@ const STATUS_COLOR = {
 	running: STATUS_RUNNING,
 	waiting: STATUS_WAITING,
 	succeeded: STATUS_DONE,
-	failed: STATUS_FAILED
+	failed: STATUS_FAILED,
+	skipped: STATUS_QUEUED
 };
 /** An edge reads by the status of the node it points AT — with the 2026-10-09
 *  fix: SETTLED edges go quiet. A succeeded run used to paint every edge green
@@ -1346,7 +1398,8 @@ const STATUS_LABEL = {
 	running: "Running",
 	waiting: "Waiting on you",
 	succeeded: "Done",
-	failed: "Failed"
+	failed: "Failed",
+	skipped: "Not taken"
 };
 /** @deprecated `StatusPill` now renders ui's StatusPill from `STATUS_TONE`;
 *  kept for consumers that styled their own pill from it.
@@ -1378,6 +1431,11 @@ const STATUS_PILL = {
 		background: "var(--surface-danger-bg)",
 		color: "var(--surface-danger-text)",
 		borderColor: "var(--surface-danger-border)"
+	},
+	skipped: {
+		background: "transparent",
+		color: "hsl(var(--muted-foreground))",
+		borderColor: "color-mix(in srgb, hsl(var(--muted-foreground)) 28%, transparent)"
 	}
 };
 /** The card's border + ring once a node has live run state. The emphasis
@@ -1403,6 +1461,11 @@ function statusBorder(status) {
 			};
 		}
 		case "queued": return { borderColor: "hsl(var(--border))" };
+		case "skipped": return {
+			borderColor: "hsl(var(--muted-foreground) / 0.45)",
+			borderStyle: "dashed",
+			opacity: .5
+		};
 		case "succeeded": return {
 			borderColor: RESTING_BORDER,
 			boxShadow: RESTING_SHADOW
@@ -1560,7 +1623,8 @@ const STATUS_TONE = {
 	running: "running",
 	waiting: "warning",
 	succeeded: "neutral",
-	failed: "danger"
+	failed: "danger",
+	skipped: "neutral"
 };
 /** The status pill in a card's header — the one place the run state is spelled
 *  out in words. ui's `StatusPill`, so a node's state carries the same glyph,
@@ -1642,6 +1706,7 @@ function emptySlotLabel(status) {
 		case "queued": return "Not run yet";
 		case "succeeded": return "No output";
 		case "failed": return "No error reported";
+		case "skipped": return "Not taken this run";
 		default: return;
 	}
 }

package/dist/styles.css

@@ -283,6 +283,9 @@
     white-space: nowrap;
     border-width: 0;
   }
+  .\!fixed {
+    position: fixed !important;
+  }
   .absolute {
     position: absolute;
   }
@@ -298,6 +301,9 @@
   .sticky {
     position: sticky;
   }
+  .\!inset-3 {
+    inset: calc(var(--spacing) * 3) !important;
+  }
   .inset-0 {
     inset: 0px;
   }
@@ -433,6 +439,9 @@
   .\!z-10 {
     z-index: 10 !important;
   }
+  .\!z-40 {
+    z-index: 40 !important;
+  }
   .z-0 {
     z-index: 0;
   }
@@ -712,6 +721,9 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 6;
   }
+  .\!hidden {
+    display: none !important;
+  }
   .block {
     display: block;
   }
@@ -826,6 +838,9 @@
   .\!h-2\.5 {
     height: calc(var(--spacing) * 2.5) !important;
   }
+  .\!h-auto {
+    height: auto !important;
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }
@@ -940,6 +955,9 @@
   .h-\[34rem\] {
     height: 34rem;
   }
+  .h-\[36rem\] {
+    height: 36rem;
+  }
   .h-\[72\%\] {
     height: 72%;
   }
@@ -1186,6 +1204,9 @@
   .\!w-2\.5 {
     width: calc(var(--spacing) * 2.5) !important;
   }
+  .\!w-auto {
+    width: auto !important;
+  }
   .w-0 {
     width: 0px;
   }
@@ -1348,6 +1369,9 @@
   .w-\[268px\] {
     width: 268px;
   }
+  .w-\[358px\] {
+    width: 358px;
+  }
   .w-\[360px\] {
     width: 360px;
   }
@@ -1381,6 +1405,9 @@
   .w-\[1000px\] {
     width: 1000px;
   }
+  .w-\[1100px\] {
+    width: 1100px;
+  }
   .w-\[calc\(100vw-32px\)\] {
     width: calc(100vw - 32px);
   }
@@ -2976,6 +3003,12 @@
       background-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);
     }
   }
+  .bg-primary\/\[0\.04\] {
+    background-color: hsl(var(--primary));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--primary)) 4%, transparent);
+    }
+  }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
@@ -3963,6 +3996,12 @@
       color: color-mix(in oklab, hsl(var(--primary)) 70%, transparent);
     }
   }
+  .text-primary\/80 {
+    color: hsl(var(--primary));
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, hsl(var(--primary)) 80%, transparent);
+    }
+  }
   .text-red-400 {
     color: var(--color-red-400);
   }
@@ -4065,6 +4104,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.2\)\] {
     --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.2));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5572,6 +5615,9 @@
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
     }
+    .sm\:\!block {
+      display: block !important;
+    }
     .sm\:flex {
       display: flex;
     }