WEB-337-Improved the UI styling by adjusting spacing and layout for better readability and alignment #2697
Conversation
WalkthroughRefactors the create-data-table component’s template to a card-based layout, removes an unused ng-template, adjusts a tooltip attribute, and reorganizes sections. Adds new SCSS styling with shadows, borders, spacing, and responsive behavior for layout and buttons. No functional or API changes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/app/system/manage-data-tables/create-data-table/create-data-table.component.html(3 hunks)src/app/system/manage-data-tables/create-data-table/create-data-table.component.scss(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
src/app/**
⚙️ CodeRabbit configuration file
src/app/**: For Angular code: verify component separation, trackBy on *ngFor,
strict type safety, and clean observable patterns.
Files:
src/app/system/manage-data-tables/create-data-table/create-data-table.component.htmlsrc/app/system/manage-data-tables/create-data-table/create-data-table.component.scss
⏰ 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). (1)
- GitHub Check: Run Lint, Build and Deploy
| button { | ||
| position: relative; | ||
| right: 150px; | ||
| margin-top: 5px; | ||
| width: 100%; | ||
| } |
There was a problem hiding this comment.
Fix the button layout regression on large screens.
Setting width: 100% and nudging the button right: 150px makes it span the entire row and overlap adjacent content once the viewport is ≥992px, breaking the alignment this PR is trying to improve. Please keep the button auto-sized for desktop and only stretch it on narrow breakpoints. A flex-friendly tweak can look like:
.layout-lt-md-column {
button {
- position: relative;
- right: 150px;
- margin-top: 5px;
- width: 100%;
+ margin-top: 5px;
+ margin-left: auto;
}
}
@media (width <= 768px) {
.layout-lt-md-column {
button {
- right: 0;
- width: 100%;
- margin-top: 5px;
+ width: 100%;
+ margin-left: 0;
}
}
}
@media (width >= 769px) and (width <= 991px) {
.layout-lt-md-column {
button {
- right: 20px;
- width: auto;
+ margin-left: auto;
+ width: auto;
}
}
}This keeps the desktop layout intact while preserving the mobile-friendly full-width button.
Also applies to: 58-62
🤖 Prompt for AI Agents
In
src/app/system/manage-data-tables/create-data-table/create-data-table.component.scss
around lines 40-45 (and similarly 58-62), the button is forced full-width and
shifted right with right:150px which causes overlap on large viewports; change
the rules to remove right:150px and width:100%, make the button auto-sized by
default (width: auto) and use margin-left: auto or align-self: flex-end when the
parent is a flex container to keep it right-aligned on desktop, and add a media
query (max-width: 991px) to set width: 100% for narrow screens so the button
becomes full-width on mobile; apply the identical adjustments to the other
occurrence at lines 58-62.
There was a problem hiding this comment.
@shubhamkumar9199 could you please check this review?
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
There was a problem hiding this comment.
@shubhamkumar9199 could you please check this review?
@IOhacker i am working on it
2 participants
Description
Improved the UI styling by adjusting spacing and layout for better readability and alignment. Specifically:
Increased the gap between buttons to avoid clutter and improve usability.
Added a box-style container around the section to give it a more structured look.
#{Issue Number}
WEB-337
Screenshots, if any
Checklist
before:
after:
Please make sure these boxes are checked before submitting your pull request - thanks!
[X ] If you have multiple commits please combine them into a one commit by squashing them.
[X ] Read and understood the contribution guidelines at
web-app/.github/CONTRIBUTING.md.Summary by CodeRabbit
New Features
Refactor
Style
Bug Fixes