OUT-3857 | Screen preview outline disappears on smaller screens

[arpandhakal]

Changes

• Removed viewport-conditional border/shadow/rounded-corner classes (max-[860px]:border-0, min-[860px]:border, max-[860px]:shadow-none, min-[860px]:shadow-sm, max-[860px]:rounded-none) that were introduced in OUT-3296
• Restored always-on border, shadow-sm, and rounded-lg on the preview container so the outline is visible at all screen sizes

Root Cause

fix(OUT-3296) swapped the original always-on border/shadow classes for viewport-width-conditional variants, which caused the outline to vanish below 860px.

Testing

• Open the client home preview and resize the browser window to a narrow/mobile width — the outline should remain visible throughout
• Confirm the preview still renders correctly at all breakpoints (desktop, tablet, mobile)

Impact

Low — single-line class change to a presentational wrapper div in Preview.tsx. No logic or data flow affected.

Fixes OUT-3857

🤖 Generated with Claude Code

[linear-code]

OUT-3857

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
client-home-v3	Ready	Preview, Comment	Jun 22, 2026 1:10pm

[greptile-apps]

Greptile Summary

This PR fixes the screen preview outline vanishing on screens narrower than 860 px by replacing viewport-conditional Tailwind classes (min-[860px]:border, max-[860px]:border-0, etc.) with always-on equivalents (border, shadow-sm, rounded-lg).

• The root cause was that OUT-3296 conditionally applied border only at ≥ 860 px and explicitly zeroed it out below that breakpoint; the fix correctly removes all those conditional variants and lets the base utility classes apply unconditionally.
• The change is purely presentational, scoped to a single wrapper div, and has no effect on data flow or component logic.

Confidence Score: 5/5

Safe to merge — the change is limited to removing incorrect breakpoint-conditional Tailwind classes and restoring always-on equivalents on a single presentational wrapper div.

A single className string is changed on a wrapper div with no logic, state, or data-flow involvement. The before and after classes are straightforward Tailwind utilities; the fix correctly matches the intended design (outline visible at all widths) and introduces no regressions elsewhere in the component.

No files require special attention.

Important Files Changed

Filename	Overview
src/features/editor/components/Preview/Preview.tsx	Removes viewport-conditional border/shadow/rounded classes from the preview container and restores always-on equivalents, fixing the outline disappearing below 860px.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Preview component renders] --> B{displayMode}
    B -- MOBILE --> C[max-w-sm applied]
    B -- default --> D[no max-width constraint]
    C --> E[Outer div: rounded-lg + border + border-gray-200 + shadow-sm\nalways applied at ALL screen sizes]
    D --> E
    E --> F[PreviewTopBar]
    E --> G[Scrollable content area]
    G --> H{workspace loaded?}
    H -- No --> I[Loader spinner]
    H -- Yes --> J[Heading / Subheading / Banner / ActionsCard / ReadonlyEditor]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[Preview component renders] --> B{displayMode}
    B -- MOBILE --> C[max-w-sm applied]
    B -- default --> D[no max-width constraint]
    C --> E[Outer div: rounded-lg + border + border-gray-200 + shadow-sm\nalways applied at ALL screen sizes]
    D --> E
    E --> F[PreviewTopBar]
    E --> G[Scrollable content area]
    G --> H{workspace loaded?}
    H -- No --> I[Loader spinner]
    H -- Yes --> J[Heading / Subheading / Banner / ActionsCard / ReadonlyEditor]

Loading

_{Reviews (1): Last reviewed commit: "fix(OUT-3857): always show screen previe..." | Re-trigger Greptile}

[priosshrsth]

lgtm