fix: fix paddings issues & align delete button for visited cards

[Sobyt483]

Summary by CodeRabbit

• Style

  • Updated dashboard padding with responsive design adjustments for mobile, tablet, and desktop viewports using theme-driven CSS variables.
  • Refined card spacing and positioning across dashboard components.
  • Adjusted grid margins and gaps for improved layout consistency.

• Layout

  • Reduced card heights for better visual hierarchy (Pods Table, What's New, Favorites, Service Status cards).

[coderabbitai]

Warning

Review limit reached

@Sobyt483, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 49 minutes and 49 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: cc483686-6cfe-41a4-a14c-f2bed499bd17

📥 Commits

Reviewing files that changed from the base of the PR and between 8d8014f and 39b9540.

📒 Files selected for processing (1)

• projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss

📝 Walkthrough

Walkthrough

This PR refines dashboard and card component styling by introducing theme-driven CSS variables for padding across multiple layers, adding responsive media queries for viewport-specific spacing, adjusting visited card positioning, and synchronizing card heights in storybook configurations.

Changes

Layout and Spacing Refinements

Layer / File(s)	Summary
Theme-driven padding and responsive dashboard layout projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss, projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss, projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.scss, projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts, projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.html	Dashboard padding transitions from fixed 2rem to theme CSS variable --sapShell_Space_XL with calc fallback; responsive media queries for mobile/tablet/desktop override padding using --sapShell_Space_S/M/L variables. Dashboard card uses CSS logical properties padding-inline-start/end with --mfp_cardContainerPadding variable. Dashboard section padding and grid gap split into separate top/column/row properties with CSS variable defaults. Grid layout margins explicitly set to zero. Template event binding reordered for clarity.
Visited card styling and badge positioning projects/ngx/cards/visited-service-card/visited-service-card.component.scss	.visited-card-wrapper padding-top rule removed; .visited-card__type-badge vertical offset adjusted from 0 to -0.625rem to compensate for spacing shift.
Card height configuration in storybook projects/ngx/declarative-ui/stories/dashboard.cards.ts, projects/ngx/declarative-ui/stories/dashboard.stories.ts	Card heights reduced across both configuration files: table-pods 37→35, whats-new 57→55, favorites 21→20, service-status 30→28 in CARDS and AVAILABLE_CARDS objects.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

bug

Suggested reviewers

• gkrajniak

Poem

🐰 Whiskers twitch at spacing so fine,
CSS vars now gracefully align.
Responsive and theme-aware,
Each card height refined with care.
The dashboard dances light and neat!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title references 'paddings issues' and 'delete button alignment for visited cards', but the summary shows changes span multiple dashboard components, CSS variables, grid sizing, and more—making the title partially related but overly narrow.	Revise the title to reflect the broader scope of changes, such as: 'refactor: align component paddings and adjust dashboard card heights' or provide a more accurate title focusing on the primary objective.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch paddings-fix

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss`:
- Around line 91-94: The padding in the .mfp-dashboard rule uses a typo'd calc
value (calc(1023px - 10px)); update the mobile breakpoint to use the intended
small spacing variable by replacing calc(1023px - 10px) with calc(1rem - 10px)
so --sapShell_Space_S reflects 1rem; locate the .mfp-dashboard rule in
projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss and
adjust the padding expression accordingly.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 917b261e-810b-420d-ae10-0b8d92f94652

📥 Commits

Reviewing files that changed from the base of the PR and between f3230bc and 8d8014f.

📒 Files selected for processing (8)

• projects/ngx/cards/visited-service-card/visited-service-card.component.scss
• projects/ngx/declarative-ui/dashboard/card/dashboard-card.component.scss
• projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.html
• projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.scss
• projects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.ts
• projects/ngx/declarative-ui/dashboard/section/dashboard-section.component.scss
• projects/ngx/declarative-ui/stories/dashboard.cards.ts
• projects/ngx/declarative-ui/stories/dashboard.stories.ts