Added more reliable ui#67
Merged
Merged
Conversation
Contributor
📝 WalkthroughWalkthroughThe case-management CSS stylesheet undergoes a comprehensive redesign, transitioning from a dark, variable-driven theme to a light, Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/main/resources/static/css/case-management.css`:
- Around line 1-125: The CSS rules are too generic (targeting `#content-area` and
global elements) and must be scoped to case-management pages; update every
selector that starts with or references "#content-area", global
list/heading/button styles, and the rules at the other occurrence (lines noted)
to be prefixed with a case-management container class such as
".case-management-page" or ".case-management-container" (e.g., change
"#content-area h1" to ".case-management-page `#content-area` h1" and similarly for
"#content-area form", "#content-area button", "#content-area ul", etc.),
ensuring selectors that already reference ".case-management-page",
".case-management-container", or ".case-detail-panel-content" remain consistent
so these styles only affect case-management screens.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: bdf4dd2f-97ed-4e7e-8e09-d2708135a329
📒 Files selected for processing (2)
src/main/resources/static/css/case-management.csssrc/main/resources/templates/dashboard-layout.html
Comment on lines
1
to
125
| #content-area { | ||
| background: var(--color-bg); | ||
| padding: 28px; | ||
| background: #f4f6fb; | ||
| min-height: 100vh; | ||
| } | ||
|
|
||
| .case-management-wrapper { | ||
| display: grid; | ||
| grid-template-columns: 320px 1fr 1fr; | ||
| gap: 20px; | ||
| padding: 20px; | ||
| align-items: start; | ||
| } | ||
|
|
||
| .case-panel { | ||
| background: var(--color-surface); | ||
| color: var(--color-text); | ||
| border-radius: 20px; | ||
| padding: 24px; | ||
| min-height: 70vh; | ||
| box-shadow: var(--shadow-panel); | ||
| } | ||
|
|
||
| .case-panel h2 { | ||
| margin: 0 0 16px; | ||
| font-size: 2rem; | ||
| line-height: 1.2; | ||
| color: var(--color-text); | ||
| } | ||
|
|
||
| .case-panel h3 { | ||
| margin: 0 0 12px; | ||
| font-size: 1.15rem; | ||
| color: var(--color-text); | ||
| } | ||
|
|
||
| .case-panel p, | ||
| .case-panel label, | ||
| .case-panel strong { | ||
| color: var(--color-text); | ||
| } | ||
|
|
||
| .case-panel span { | ||
| color: inherit; | ||
| } | ||
|
|
||
| .registry-panel-content, | ||
| .case-record-panel-content, | ||
| .case-management-page, | ||
| .case-management-container, | ||
| .case-detail-panel-content { | ||
| color: var(--color-text); | ||
| max-width: 1100px; | ||
| } | ||
|
|
||
| .feedback-message { | ||
| #content-area h1, | ||
| #content-area h2, | ||
| #content-area h3 { | ||
| margin: 0 0 12px; | ||
| font-size: 0.95rem; | ||
| color: #111827; | ||
| } | ||
|
|
||
| .success-message { | ||
| color: var(--color-success); | ||
| #content-area h1 { | ||
| font-size: 32px; | ||
| } | ||
|
|
||
| .error-message { | ||
| color: var(--color-error); | ||
| #content-area h2 { | ||
| font-size: 26px; | ||
| } | ||
|
|
||
| .section-divider { | ||
| margin: 20px 0; | ||
| border: none; | ||
| border-top: 1px solid var(--color-border); | ||
| #content-area h3 { | ||
| font-size: 21px; | ||
| } | ||
|
|
||
| .form-section-title { | ||
| margin: 20px 0 12px; | ||
| color: var(--color-text); | ||
| font-size: 1.15rem; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .case-record-heading { | ||
| margin-bottom: 18px; | ||
| color: var(--color-text); | ||
| } | ||
|
|
||
| .case-record-heading-name { | ||
| color: inherit; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .case-panel .form-group { | ||
| margin-bottom: 14px; | ||
| #content-area form, | ||
| #content-area .panel, | ||
| #content-area .case-detail-panel-content { | ||
| background: white; | ||
| border-radius: 14px; | ||
| padding: 20px; | ||
| margin-bottom: 22px; | ||
| box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08); | ||
| } | ||
|
|
||
| .case-panel .form-group label { | ||
| #content-area label { | ||
| display: block; | ||
| margin-bottom: 6px; | ||
| font-size: 0.95rem; | ||
| color: var(--color-text); | ||
| margin-top: 10px; | ||
| margin-bottom: 4px; | ||
| font-weight: 700; | ||
| color: #374151; | ||
| } | ||
|
|
||
| .case-panel .form-group input, | ||
| .case-panel .form-group textarea, | ||
| .case-panel .form-group select { | ||
| #content-area input, | ||
| #content-area textarea, | ||
| #content-area select { | ||
| width: 100%; | ||
| max-width: 420px; | ||
| padding: 10px 12px; | ||
| border-radius: 10px; | ||
| border: 1px solid var(--color-border); | ||
| background: var(--color-input-bg); | ||
| color: var(--color-text); | ||
| outline: none; | ||
| box-sizing: border-box; | ||
| font-size: 1rem; | ||
| border: 1px solid #cbd5e1; | ||
| border-radius: 8px; | ||
| font-size: 15px; | ||
| background: #fff; | ||
| } | ||
|
|
||
| .case-panel .form-group input::placeholder, | ||
| .case-panel .form-group textarea::placeholder { | ||
| color: var(--color-muted); | ||
| } | ||
|
|
||
| .case-panel .form-group textarea { | ||
| min-height: 100px; | ||
| #content-area textarea { | ||
| min-height: 90px; | ||
| resize: vertical; | ||
| } | ||
|
|
||
| .case-panel .form-group input:focus, | ||
| .case-panel .form-group textarea:focus, | ||
| .case-panel .form-group select:focus { | ||
| border-color: var(--color-accent); | ||
| box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.16); | ||
| } | ||
|
|
||
| .case-panel .form-group select option { | ||
| color: #111111; | ||
| } | ||
|
|
||
| .btn-primary { | ||
| display: inline-block; | ||
| #content-area button, | ||
| #content-area .btn-primary { | ||
| width: 100%; | ||
| max-width: 420px; | ||
| margin-top: 14px; | ||
| padding: 12px 16px; | ||
| border: none; | ||
| border-radius: 12px; | ||
| background: var(--color-primary); | ||
| color: var(--color-text); | ||
| font-size: 1rem; | ||
| border-radius: 10px; | ||
| background: #6b21a8; | ||
| color: white; | ||
| font-weight: 700; | ||
| cursor: pointer; | ||
| transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease; | ||
| box-sizing: border-box; | ||
| appearance: none; | ||
| -webkit-appearance: none; | ||
| } | ||
|
|
||
| .btn-primary:hover { | ||
| background: var(--color-primary-hover); | ||
| transform: translateY(-1px); | ||
| } | ||
|
|
||
| .btn-primary:active { | ||
| transform: translateY(0); | ||
| } | ||
|
|
||
| .registry-list, | ||
| .case-record-list, | ||
| .case-file-list { | ||
| list-style: none; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 12px; | ||
| padding: 0; | ||
| margin: 16px 0 0 0; | ||
| #content-area button:hover, | ||
| #content-area .btn-primary:hover { | ||
| background: #581c87; | ||
| } | ||
|
|
||
| .registry-list li, | ||
| .case-record-list li, | ||
| .case-file-list li { | ||
| #content-area ul { | ||
| list-style: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| background: transparent; | ||
| } | ||
|
|
||
| .registry-button, | ||
| .case-record-button { | ||
| display: block; | ||
| width: 100%; | ||
| padding: 14px 16px; | ||
| border: 1px solid var(--color-border); | ||
| border-radius: 14px; | ||
| background: linear-gradient(180deg, var(--color-surface-soft), var(--color-primary)); | ||
| color: var(--color-text); | ||
| cursor: pointer; | ||
| text-align: left; | ||
| font-size: 1rem; | ||
| font-weight: 600; | ||
| box-sizing: border-box; | ||
| transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; | ||
| appearance: none; | ||
| -webkit-appearance: none; | ||
| } | ||
|
|
||
| .registry-button:hover, | ||
| .case-record-button:hover { | ||
| background: linear-gradient(180deg, var(--color-primary-hover), var(--color-primary)); | ||
| transform: translateY(-1px); | ||
| border-color: rgba(255, 255, 255, 0.22); | ||
| margin: 10px 0 20px; | ||
| } | ||
|
|
||
| .registry-button:active, | ||
| .case-record-button:active { | ||
| transform: translateY(0); | ||
| #content-area li { | ||
| margin-bottom: 8px; | ||
| } | ||
|
|
||
| .registry-name, | ||
| .case-record-number { | ||
| color: inherit; | ||
| #content-area li a, | ||
| #content-area li button, | ||
| #content-area .case-list button { | ||
| display: inline-block; | ||
| width: auto; | ||
| max-width: none; | ||
| margin: 0; | ||
| padding: 8px 12px; | ||
| border-radius: 8px; | ||
| border: 1px solid #ddd6fe; | ||
| background: #f5f3ff; | ||
| color: #4c1d95; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .registry-code, | ||
| .case-record-title { | ||
| margin-left: 8px; | ||
| color: rgba(255, 255, 255, 0.92); | ||
| } | ||
|
|
||
| .empty-state { | ||
| color: var(--color-muted); | ||
| font-style: italic; | ||
| padding: 4px 0; | ||
| } | ||
|
|
||
| .file-row { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| gap: 12px; | ||
| padding: 10px 12px; | ||
| border-radius: 10px; | ||
| background: var(--color-row-bg); | ||
| border: 1px solid var(--color-border); | ||
| } | ||
|
|
||
| .file-actions { | ||
| display: flex; | ||
| gap: 8px; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .file-actions a, | ||
| .file-actions button { | ||
| border: none; | ||
| background: transparent; | ||
| color: var(--color-accent); | ||
| cursor: pointer; | ||
| font-size: 0.95rem; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .file-actions a:hover, | ||
| .file-actions button:hover { | ||
| opacity: 0.85; | ||
| } | ||
|
|
||
| @media (max-width: 1100px) { | ||
| .case-management-wrapper { | ||
| grid-template-columns: 1fr; | ||
| } | ||
|
|
||
| .case-panel { | ||
| min-height: auto; | ||
| } | ||
| } | ||
|
|
||
| /* större luft efter huvudrubrik */ | ||
| .case-panel h2 { | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| /* spacing runt formulärsektion */ | ||
| .form-section-title { | ||
| margin-top: 24px; | ||
| margin-bottom: 12px; | ||
| } | ||
|
|
||
| /* extra luft före listor */ | ||
| .case-record-list, | ||
| .registry-list { | ||
| margin-top: 12px; | ||
| #content-area li a:hover, | ||
| #content-area li button:hover, | ||
| #content-area .case-list button:hover { | ||
| background: #ede9fe; | ||
| } | ||
|
|
||
| /* lite luft efter formulär */ | ||
| form { | ||
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| /* snyggare separator */ | ||
| .section-divider { | ||
| margin: 24px 0; | ||
| #content-area strong { | ||
| color: #111827; | ||
| } | ||
|
|
||
| .registry-panel-content, | ||
| .case-record-panel-content, | ||
| .case-detail-panel-content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 20px; | ||
| #content-area p { | ||
| margin: 8px 0; | ||
| font-size: 16px; | ||
| } |
Contributor
There was a problem hiding this comment.
Scope these styles to case-management containers only.
Because this stylesheet is included in the shared dashboard layout, these generic #content-area and global message selectors will restyle non-case pages too (forms, lists, headings, buttons, messages), which is a regression risk.
🎯 Suggested scoping fix
-#content-area {
+#content-area .case-management-page {
padding: 28px;
background: `#f4f6fb`;
min-height: 100vh;
}
-#content-area h1,
-#content-area h2,
-#content-area h3 {
+#content-area .case-management-page h1,
+#content-area .case-management-page h2,
+#content-area .case-management-page h3 {
margin: 0 0 12px;
color: `#111827`;
}
-#content-area form,
-#content-area .panel,
-#content-area .case-detail-panel-content {
+#content-area .case-management-page form,
+#content-area .case-management-page .panel,
+#content-area .case-management-page .case-detail-panel-content {
...
}
-#content-area input,
-#content-area textarea,
-#content-area select {
+#content-area .case-management-page input,
+#content-area .case-management-page textarea,
+#content-area .case-management-page select {
...
}
-#content-area button,
-#content-area .btn-primary {
+#content-area .case-management-page button,
+#content-area .case-management-page .btn-primary {
...
}
-.feedback-message,
-.success-message,
-.error-message {
+#content-area .case-management-page .feedback-message,
+#content-area .case-management-page .success-message,
+#content-area .case-management-page .error-message {
...
}
-.success-message {
+#content-area .case-management-page .success-message {
...
}
-.error-message {
+#content-area .case-management-page .error-message {
...
}Also applies to: 127-143
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/main/resources/static/css/case-management.css` around lines 1 - 125, The
CSS rules are too generic (targeting `#content-area` and global elements) and must
be scoped to case-management pages; update every selector that starts with or
references "#content-area", global list/heading/button styles, and the rules at
the other occurrence (lines noted) to be prefixed with a case-management
container class such as ".case-management-page" or ".case-management-container"
(e.g., change "#content-area h1" to ".case-management-page `#content-area` h1" and
similarly for "#content-area form", "#content-area button", "#content-area ul",
etc.), ensuring selectors that already reference ".case-management-page",
".case-management-container", or ".case-detail-panel-content" remain consistent
so these styles only affect case-management screens.
Rickank
approved these changes
Apr 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit