Fix/correct margin for bar titles (#4383)

* fix(visualization):spacing in ribbon bar tittle

* fix(visualization):remove horizontal scrolling bar fronm the coor metric settings

---------

Co-authored-by: Christian Hühn <161825497+ChristianHuehn@users.noreply.github.com>

Author: lina-medina-mw

plans/fix-bar-title-margins.md

@@ -0,0 +1,39 @@
+---
+name: Fix ribbon bar panel title margins
+issue: #4287
+state: complete
+version: N/A
+---
+
+## Goal
+
+Fix the margin issue for ribbon bar panel titles where Tailwind CSS reset is overriding the SCSS-defined margin of `0 5px`. Replace SCSS margin with Tailwind utility classes to ensure proper spacing.
+
+## Tasks
+
+### 1. Update ribbon bar panel title styling
+- Replace SCSS margin definition with Tailwind utility classes in the HTML template
+- The `.section-title` class currently has `margin: 0 5px` defined in SCSS (ribbonBarPanel.component.scss:29)
+- Apply `mx-[5px]` Tailwind class directly to the title div element in ribbonBarPanel.component.html:14
+- Remove the margin definition from SCSS file since Tailwind classes will handle spacing
+
+### 2. Verify the fix
+- Test the visual appearance matches the expected behavior shown in issue screenshots
+- Ensure margins are properly applied on both sides of the title text
+- Check that the fix works consistently across different ribbon bar panels
+
+## Steps
+
+- [x] Complete Task 1: Add Tailwind margin classes to section-title div in HTML template
+- [x] Complete Task 2: Remove SCSS margin definition from ribbonBarPanel.component.scss
+- [x] Complete Task 3: Verify the visual appearance matches expected behavior
+
+## Review Feedback Addressed
+
+(To be filled during PR review)
+
+## Notes
+
+- Using `mx-[5px]` Tailwind class which translates to `margin-left: 5px; margin-right: 5px`
+- This aligns with the project's migration to DaisyUI and Tailwind CSS
+- The my-0 class is implicit as Tailwind reset sets vertical margin to 0 by default

visualization/app/codeCharta/ui/ribbonBar/colorSettingsPanel/colorSettingsPanel.component.html

@@ -30,7 +30,7 @@
             [values]="(sliderValues$ | async).values"
             [isAttributeDirectionInverted]="isAttributeDescriptionInversed$ | async"
         ></cc-metric-color-range-diagram>
-        <label class="form-control gradient-mode-selector">
+        <label class="form-control my-[5px]">
             <div class="label">
                 <span class="label-text">Gradient Mode</span>
             </div>

visualization/app/codeCharta/ui/ribbonBar/colorSettingsPanel/colorSettingsPanel.component.scss

@@ -1,8 +1,3 @@
-.gradient-mode-selector {
-    margin: 5px 10px;
-    width: 93%;
-}
-
 .color-row {
     display: flex;
     align-items: center;

visualization/app/codeCharta/ui/ribbonBar/ribbonBarPanel/ribbonBarPanel.component.html

@@ -11,7 +11,7 @@
         }
 
         @if (title || hasSettings) {
-            <div #toggle class="section-title" (click)="toggleSettings()">
+            <div #toggle class="section-title mx-[5px]" (click)="toggleSettings()">
                 {{ title }}
 
                 @if (hasSettings) {

visualization/app/codeCharta/ui/ribbonBar/ribbonBarPanel/ribbonBarPanel.component.scss

@@ -26,7 +26,6 @@ mat-card {
         transition: background-color 0.4s;
         border-bottom: 1px solid transparent;
         white-space: nowrap;
-        margin: 0 5px;
 
         @at-root :host.separator & {
             border-top: 1px solid rgba(0, 0, 0, 0.12);