Fix Settings, Scrollbar and Docs

[upayanmazumder]

Fixes for #15 #13 #12

This pull request updates the documentation layout and theme to better align with the overall site UI, improves scrollbar styling, and introduces more flexible styling for the Card component. The most notable changes are grouped below.

Documentation Theme and Layout Enhancements:

• Introduced a .docs-theme CSS class in globals.css to override default background, border, and text color utilities within the docs, ensuring consistent appearance with the site’s card-based UI. This includes custom styles for code blocks, prose, and links.
• Updated the DocsLayout component to wrap children in a .docs-theme container and center content with a maximum width, improving readability and design consistency. The sidebar layout was also adjusted to account for the top navigation bar.
• Changed docs sidebar link hover color to use a CSS variable for consistency with the themed link colors.

UI Component Improvements:

• Updated the Card component to accept a style prop, allowing inline styles to be merged with default styles. The Settings page now uses this to set the card height responsively. [1] [2] [3] [4]

Scrollbar Styling:

• Customized scrollbar appearance in globals.css to better match the app’s dark theme, using fixed background and thumb colors and making the scrollbar thinner.

[Copilot]

Pull Request Overview

This PR addresses issues #15, #13, and #12 by implementing theming improvements for the documentation pages, customizing scrollbar styling to match the dark theme, and adding flexibility to the Card component through a new style prop.

Key Changes:

• Added a .docs-theme CSS class to override default documentation styles and align them with the site's card-based UI
• Implemented custom scrollbar styling with fixed colors and thinner width for better dark theme integration
• Enhanced the Card component to accept inline styles via a new style prop

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
app/src/components/ui/Card/Card.tsx	Added style prop to CardProps interface and merged it with default styles
app/src/components/Settings/Settings.tsx	Applied inline style to Card component for responsive height
app/src/app/globals.css	Added .docs-theme overrides and customized scrollbar colors/width
app/src/app/docs/layout.tsx	Applied .docs-theme class, centered content, and adjusted sidebar positioning

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}