Edit Project: Introduce SCSS variables for project edit styles

[shweta2101]

Changes Implemented

1. Reduced excessive spacing and sizing on the project edit page to create a more compact layout.
2. Decreased the sidebar width and spacing between navigation options.
3. Tightened header, breadcrumb, content, card, button, avatar, and typography sizing.
4. Introduced descriptive SCSS variables for spacing, sizing, typography, border radii, and responsive values.
5. Replaced hard-coded values with the new SCSS variables for improved consistency and maintainability.
6. Reused Bootstrap variables such as $spacer and $font-size-base where applicable.
7. Updated mobile-specific header, title, and navigation sizing to use the new variables.
8. Kept all changes scoped to the project edit page.
9. No behavioral or data-flow changes were introduced.

Areas for Testing

1. Verify the project edit page appears more compact on desktop screens.
2. Confirm the sidebar width and spacing between navigation options match the expected UX.
3. Test every section:
   • Project details
   • Instructions
   • Imagery
   • Team Members
   • Configuration
   • Actions

Screenshot

Summary

• Added SCSS design variables to the project edit page and replaced hard-coded spacing, sizing, typography, and layout values.
• Refined header, breadcrumbs, sidebar, content panels, cards, buttons, avatars, and footer dimensions.
• Updated responsive mobile header, title, and navigation sizing.
• Reused Bootstrap variables where applicable; no behavior or data-flow changes.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 45b9f6b1-17fa-491a-bf6f-e7c167f4d359

📥 Commits

Reviewing files that changed from the base of the PR and between d1e69c0 and ea78f7b.

📒 Files selected for processing (1)

• pages/workspace/[id]/projects/[projectId]/edit.vue

---

📝 Walkthrough

Walkthrough

The project edit page’s scoped SCSS now centralizes spacing, sizing, and typography values in variables and applies them across the page shell, content panels, member results, message cards, actions, and responsive layouts.

Changes

Project edit page styling

Layer / File(s)	Summary
Shell tokens and responsive layout pages/workspace/[id]/projects/[projectId]/edit.vue	Reusable SCSS variables now drive the header, breadcrumbs, title, grid, sidebar, footer, save button, and responsive navigation styles.
Content panel layout and typography pages/workspace/[id]/projects/[projectId]/edit.vue	Content sizing, panel gaps, headings, paragraphs, fields, and labels use shared layout and typography variables.
Member, message, and action styling pages/workspace/[id]/projects/[projectId]/edit.vue	Member rows, avatars, message cards, message copy, action spacing, and action buttons use shared spacing and sizing tokens.

Estimated code review effort: 2 (Simple) | ~10 minutes

Poem

A rabbit hops through styles so neat,
With tokenized paws and spacing sweet.
The panels align, the buttons glow,
Responsive paths now smoothly flow.
“Less hardcoded!” I cheer with glee—
A tidy edit page for me! 🐇

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: introducing SCSS variables for the project edit page styles.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

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.}