fix/3095/ribbon-bar-bottom-line-isnt-fixed #3095 (#3138)

* Move shadow from ribbon-bar to mat-cards #3095

* Add PR to Changelog #3095

* Fix typo: Change boxshadow to box-shadow #3095

* Update CHANGELOG.md

Co-authored-by: Cedrik Bormann <26900540+ce-bo@users.noreply.github.com>

* Remove shadow between hight metric chooser, link metric button and color metric chooser #3095

Add new mat-card that contains height-metric-chooser, link-metric-button and color-metric-chooser

* Add flex attribute so height and color container scale  #3095

* Chore: fix formatting  #3095

Co-authored-by: Cedrik Bormann <26900540+ce-bo@users.noreply.github.com>

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 -   New calculation algorithm for treeMap that accounts for paddings and floor labels [#3077](https://github.com/MaibornWolff/codecharta/pull/3077)
 
+### Fixed 🐞
+
+-   Fix ribbon-bar shadow moving down when search is expanded [#3138](https://github.com/MaibornWolff/codecharta/pull/3138)
+
 ### Chore 👨‍💻 👩‍💻
 
 -   Documentation for new treeMap calculation algorithm [#3077](https://github.com/MaibornWolff/codecharta/pull/3077)

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

@@ -38,43 +38,45 @@
 	<cc-area-settings-panel class="cc-metric-settings-panel" [class.hidden]="panelSelection !== 'AREA_PANEL_OPEN'"></cc-area-settings-panel>
 </mat-card>
 
-<mat-card id="height-metric-card" class="height-metric-card metric-card" [class.expanded]="panelSelection === 'HEIGHT_PANEL_OPEN'">
-	<div class="section" id="height-metric-section">
-		<div class="section-header" id="height-metric-header-section">
-			<cc-height-metric-chooser></cc-height-metric-chooser>
+<mat-card id="height-and-color-metric-container">
+	<mat-card id="height-metric-card" class="height-metric-card metric-card" [class.expanded]="panelSelection === 'HEIGHT_PANEL_OPEN'">
+		<div class="section" id="height-metric-section">
+			<div class="section-header" id="height-metric-header-section">
+				<cc-height-metric-chooser></cc-height-metric-chooser>
+			</div>
+			<span class="section-title" (click)="updatePanelSelection('HEIGHT_PANEL_OPEN')" title="Show height metric settings">
+				Height Metric Options <i class="fa fa-angle-down"></i>
+			</span>
 		</div>
-		<span class="section-title" (click)="updatePanelSelection('HEIGHT_PANEL_OPEN')" title="Show height metric settings">
-			Height Metric Options <i class="fa fa-angle-down"></i>
-		</span>
-	</div>
-	<cc-height-settings-panel
-		class="cc-metric-settings-panel"
-		[class.hidden]="panelSelection !== 'HEIGHT_PANEL_OPEN'"
-	></cc-height-settings-panel>
-</mat-card>
+		<cc-height-settings-panel
+			class="cc-metric-settings-panel"
+			[class.hidden]="panelSelection !== 'HEIGHT_PANEL_OPEN'"
+		></cc-height-settings-panel>
+	</mat-card>
 
-<mat-card *ngIf="!(isDeltaState$ | async)" class="link-color-metric-to-height-metric-card">
-	<cc-link-color-metric-to-height-metric-button></cc-link-color-metric-to-height-metric-button>
-</mat-card>
+	<mat-card *ngIf="!(isDeltaState$ | async)" class="link-color-metric-to-height-metric-card">
+		<cc-link-color-metric-to-height-metric-button></cc-link-color-metric-to-height-metric-button>
+	</mat-card>
 
-<mat-card
-	*ngIf="!(isDeltaState$ | async)"
-	id="color-metric-card"
-	class="color-metric-card metric-card"
-	[class.expanded]="panelSelection === 'COLOR_PANEL_OPEN'"
->
-	<div class="section">
-		<div class="section-header" id="color-metric-header-section">
-			<cc-color-metric-chooser></cc-color-metric-chooser>
+	<mat-card
+		*ngIf="!(isDeltaState$ | async)"
+		id="color-metric-card"
+		class="color-metric-card metric-card"
+		[class.expanded]="panelSelection === 'COLOR_PANEL_OPEN'"
+	>
+		<div class="section">
+			<div class="section-header" id="color-metric-header-section">
+				<cc-color-metric-chooser></cc-color-metric-chooser>
+			</div>
+			<span class="section-title" (click)="updatePanelSelection('COLOR_PANEL_OPEN')" title="Show color metric settings">
+				Color Metric Options <i class="fa fa-angle-down"></i>
+			</span>
 		</div>
-		<span class="section-title" (click)="updatePanelSelection('COLOR_PANEL_OPEN')" title="Show color metric settings">
-			Color Metric Options <i class="fa fa-angle-down"></i>
-		</span>
-	</div>
-	<cc-color-settings-panel
-		class="cc-metric-settings-panel"
-		[class.hidden]="panelSelection !== 'COLOR_PANEL_OPEN'"
-	></cc-color-settings-panel>
+		<cc-color-settings-panel
+			class="cc-metric-settings-panel"
+			[class.hidden]="panelSelection !== 'COLOR_PANEL_OPEN'"
+		></cc-color-settings-panel>
+	</mat-card>
 </mat-card>
 
 <mat-card

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

@@ -9,7 +9,18 @@ cc-ribbon-bar {
 	$heightExpanded: 195;
 	$heightCollapsed: 38;
 	$border: 1px solid #cdcdcd;
-	box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
+
+	#height-and-color-metric-container {
+		display: flex;
+		flex-wrap: nowrap;
+		flex-direction: row;
+		border: none;
+		flex: 2.5 2.5 0;
+
+		.mat-card {
+			box-shadow: none;
+		}
+	}
 
 	.cc-ribbon-bar-menu-button {
 		height: 22px;
@@ -153,10 +164,6 @@ cc-ribbon-bar {
 		}
 	}
 
-	.mat-card:not([class*="mat-elevation-z"]) {
-		box-shadow: none;
-	}
-
 	mat-card,
 	.section .section-header,
 	.section .section-body,
@@ -202,7 +209,7 @@ cc-ribbon-bar {
 		width: 240px;
 		background: white;
 		border: 1px solid #b5b5b5;
-		box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
+		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
 		overflow: hidden;
 		opacity: 1;
 		font-size: 0.9em;