From 6b74f16aee0fb10a3dbd2f1947b9cc135994e269 Mon Sep 17 00:00:00 2001
From: Bastian Dehn <hhaalo@arcor.de>
Date: Sat, 13 Aug 2022 10:19:37 +0200
Subject: [PATCH] change: style for subtitle

---
 src/app/subtitle/subtitle.component.css  | 14 +++++++--
 src/app/subtitle/subtitle.component.html | 36 +++++++++++++-----------
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/app/subtitle/subtitle.component.css b/src/app/subtitle/subtitle.component.css
index a8209b8..6e66179 100644
--- a/src/app/subtitle/subtitle.component.css
+++ b/src/app/subtitle/subtitle.component.css
@@ -7,9 +7,15 @@
 	background-color: #fff6e6;
 }
 
+.flex {
+	display: flex;
+	justify-content: center;
+}
+
 .button {
-	display: inline-block;
-	margin: 0.5em 0;
+	display: block;
+	margin: 0.5em;
+	flex-basis: 15%;
 }
 
 .form {
@@ -35,6 +41,10 @@ h2 {
 }
 
 @media only screen and (min-width: 46.875em) {
+	.flex {
+		justify-content: flex-start;
+	}
+
 	h2 {
 		text-align: left;
 	}
diff --git a/src/app/subtitle/subtitle.component.html b/src/app/subtitle/subtitle.component.html
index 2918705..10e1390 100644
--- a/src/app/subtitle/subtitle.component.html
+++ b/src/app/subtitle/subtitle.component.html
@@ -4,13 +4,15 @@
 	class="subtitle"
 	[class.active]="formSubtitleVisible">
 	<h2>{{subtitle.Subtitle}}</h2>
-	<button class="button"
-		type="button"
-		(click)="editSubtitle()">Bearbeiten</button>
-	<button class="button"
-		type="button"
-		id="buttonFood"
-		(click)="insertNewFood(subtitle.Foods.length)">Speise hinzufügen</button>
+	<div class="flex">
+		<button class="button"
+			type="button"
+			(click)="editSubtitle()">Bearbeiten</button>
+		<button class="button"
+			type="button"
+			id="buttonFood"
+			(click)="insertNewFood(subtitle.Foods.length)">Speise hinzufügen</button>
+	</div>
 
 	<form #formSubtitle="ngForm" *ngIf="formSubtitleVisible"
 		(keypress)="onKeypressEnter($event)"
@@ -27,14 +29,16 @@
 
 	<div *ngFor="let food of subtitle.Foods; let i = index" cdkDrag>
 		<app-food [food]="food"></app-food>
-		<button class="button"
-			type="button"
-			(click)="insertNewFood(i)">Einfügen</button>
-		<button class="button"
-			type="button"
-			(click)="duplicateFood(i)">Duplizieren</button>
-		<button class="button"
-			type="button"
-			(click)="removeFood(i)">Löschen</button>
+		<div class="flex">
+			<button class="button"
+				type="button"
+				(click)="insertNewFood(i)">Einfügen</button>
+			<button class="button"
+				type="button"
+				(click)="duplicateFood(i)">Duplizieren</button>
+			<button class="button"
+				type="button"
+				(click)="removeFood(i)">Löschen</button>
+		</div>
 	</div>
 </div>
-- 
2.39.5