Skip to content

Improve platform capabilities panel styling and responsiveness#2996

Merged
jasontaylordev merged 4 commits into
masterfrom
fix/platform-capabilities-panel-styling
May 26, 2026
Merged

Improve platform capabilities panel styling and responsiveness#2996
jasontaylordev merged 4 commits into
masterfrom
fix/platform-capabilities-panel-styling

Conversation

@jasontaylordev
Copy link
Copy Markdown
Contributor

@jasontaylordev jasontaylordev commented May 22, 2026

Improves the platform capabilities panel to be more consistent with the rest of the ServicePulse UI.

Changes:

  • Match card border style to the rest of the site (no rounded corners, no coloured left-border accents)
  • Remove tick/cross status icon from card header - status is already conveyed by the dots and badge
  • Restructure card header into a single aligned flex row (title, indicators, badge, hide button)
  • Fix hide button overlapping the status badge
  • Fix cards not stacking vertically at narrow viewports
  • Remove description text truncation - text now wraps fully
  • Use shared btn btn-primary styles for action buttons
  • Fix layout jump on load when badge is not yet visible
  • Clean up dead CSS and undefined CSS custom variables
image

Reviewer Checklist

  • Components are broken down into sensible and maintainable sub-components.
  • Styles are scoped to the component using it. If multiple components need to share CSS, then a .css file is created containing the shared CSS and imported into component scoped style sections.
  • Naming is consistent with existing code, and adequately describes the component or function being introduced
  • Only functions utilizing Vue state or lifecycle hooks are named as composables (i.e. starting with 'use');
  • No module-level state is being introduced. If so, request the PR author to move the state to the corresponding Pinia store.

Comment thread src/Frontend/src/components/platformcapabilities/CapabilityCard.vue
Comment thread src/Frontend/src/components/platformcapabilities/CapabilityCard.vue
Copy link
Copy Markdown
Member

@johnsimons johnsimons left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, I added a small css suggestion.

@jasontaylordev jasontaylordev merged commit d3eed8c into master May 26, 2026
5 checks passed
@jasontaylordev jasontaylordev deleted the fix/platform-capabilities-panel-styling branch May 26, 2026 01:29
@jasontaylordev jasontaylordev added this to the 2.7.1 milestone May 26, 2026
@jasontaylordev jasontaylordev added the Type: Improvement Type: Improvement label May 26, 2026
@jasontaylordev jasontaylordev changed the title Fix platform capabilities panel styling and responsiveness Improve platform capabilities panel styling and responsiveness May 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Type: Improvement Type: Improvement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants