[WEB-5604] fix: lable layout title column and content wrapper styling

[anmolsinghbhatia]

Description

This PR includes fix for table layout and content wrapper styling.

Type of Change

• Bug fix

Summary by CodeRabbit

• Style
  • Improved workspace layout spacing and alignment based on sidebar visibility.
  • Applied width constraints to spreadsheet column elements for better layout consistency.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The PR contains layout refinements across workspace and spreadsheet components. Left padding behavior in the workspace content wrapper is adjusted based on app rail visibility, and a maximum width constraint is added to the spreadsheet issue row's first column.

Changes

Cohort / File(s)	Summary
Workspace Layout Padding apps/web/ce/components/workspace/content-wrapper.tsx	Base left padding changed from pl-0 to pl-2. Conditional padding logic updated: when shouldRenderAppRail is true, padding switches from pl-2 to pl-0, reversing the extra left space application.
Spreadsheet Column Width apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx	Added max-w-lg class to first column container, constraining maximum width.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify the conditional padding logic in content-wrapper.tsx correctly applies the reversed spacing when app rail visibility changes
• Confirm max-w-lg width constraint doesn't break spreadsheet column responsiveness or content overflow

Poem

🐰 Paddings shift and columns breathe,
Layout dances left to right,
When the rail takes center stage,
Spacing finds its truest height,
Clean and sharp, a perfect sight!

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title mentions 'lable layout' (likely a typo for 'label') and references fixing both 'title column' and 'content wrapper styling', which aligns with the actual changes made to these components.
Description check	✅ Passed	The description includes only the Description and Type of Change sections, with Screenshots, Test Scenarios, and References sections missing from the required template.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-table-layout-and-content-wrapper

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[makeplane]

Linked to Plane Work Item(s)

• [WEB-5604] Table layout broken – title column occupies full width and long titles are not truncated

This comment was auto-generated by Plane

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx (1)

258-258: Layout constraint looks appropriate.

The max-w-lg (512px) constraint on the sticky first column prevents it from expanding excessively while the existing truncation classes handle overflow properly. Since the column is already responsive with md:sticky, this change complements the overall layout behavior.

Optionally, consider verifying the column width works well across different viewport sizes, especially on larger screens where 512px might feel restrictive if users have very long issue names. You could test with various content lengths to ensure the balance between readability and layout density is optimal.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a3e6518 and a82a4af.

📒 Files selected for processing (2)

• apps/web/ce/components/workspace/content-wrapper.tsx (1 hunks)
• apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,mts,cts}

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.{ts,tsx,mts,cts}: Use const type parameters for more precise literal inference in TypeScript 5.0+
Use the satisfies operator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicit is return types in filter/check functions
Use NoInfer<T> utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing in switch(true) blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacy experimentalDecorators
Use using declarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Use with { type: "json" } for import attributes; avoid deprecated assert syntax (TypeScript 5.3/5.8+)
Use import type explicitly when importing types to ensure they are erased during compilation, respecting verbatimModuleSyntax flag
Use .ts, .mts, .cts extensions in import type statements (TypeScript 5.2+)
Use import type { Type } from "mod" with { "resolution-mode": "import" } for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize new Set methods like union, intersection, etc., when available (TypeScript 5.5+)
Use Object.groupBy / Map.groupBy standard methods for grouping instead of external libraries (TypeScript 5.4+)
Use Promise.withResolvers() for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted, toSpliced, with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields via super in classes (TypeScript 5....

Files:

• apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
• apps/web/ce/components/workspace/content-wrapper.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Agent
• GitHub Check: CodeQL analysis (javascript-typescript)
• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

🔇 Additional comments (1)

apps/web/ce/components/workspace/content-wrapper.tsx (1)

26-28: Padding logic is correct.

The updated padding behavior properly handles spacing based on AppRail visibility: when the AppRail is not rendered, the content gets pl-2 (8px) to avoid being flush against the edge; when the AppRail is present, padding is removed since the AppRail provides its own spacing. The existing transition classes ensure smooth visual updates.

[Copilot]

Pull request overview

This PR fixes styling issues in the spreadsheet layout's title column and the workspace content wrapper's padding logic. The changes address layout bugs related to the sticky column width constraints and padding behavior when the app rail is visible.

Key Changes:

• Added max-w-lg constraint to the spreadsheet issue row's sticky column to prevent excessive width growth
• Corrected the workspace content wrapper padding logic to properly handle spacing when the app rail is rendered vs. hidden

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx	Adds max-w-lg width constraint to the sticky table cell containing issue identifier and title
apps/web/ce/components/workspace/content-wrapper.tsx	Inverts padding logic: base pl-2 with pl-0 when app rail renders (previously pl-0 base with pl-2 when app rail renders)

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Adding max-w-lg to the sticky table cell may cause width misalignment with the corresponding header cell in spreadsheet-header.tsx (line 48), which has min-w-60 but no max-width constraint. In table layouts, sticky header and body cells should typically have matching width constraints to maintain column alignment. Consider either:

1. Adding the same max-w-lg constraint to the header cell
2. Using a more standard approach like a fixed width class on both elements
3. Verifying that the table layout still aligns correctly after this change