From 20bc7ef99c77d2f4ece0e4e1ac6604f422dd7709 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 9 Sep 2022 19:44:36 +0200
Subject: [PATCH] Feature/improve benchmark comparator on mobile (#1238)

* Improve layout for mobile

* Update changelog
---
 CHANGELOG.md                                  |  6 +++++
 .../benchmark-comparator.component.html       | 22 ++++++++++---------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49be23209..2ef2f042b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the mobile layout of the benchmark comparator
+
 ## 1.189.0 - 08.09.2022
 
 ### Changed
diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html
index 35d808497..101c57835 100644
--- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html
+++ b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html
@@ -1,14 +1,16 @@
-<div class="align-items-center d-flex">
-  <div class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate">
-    <span i18n>Benchmarks</span>
-    <sup i18n>Beta</sup>
-    <gf-premium-indicator
-      *ngIf="user?.subscription?.type === 'Basic'"
-      class="ml-1"
-    ></gf-premium-indicator>
+<div class="row">
+  <div class="col-md-6 col-xs-12 d-flex">
+    <div class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate">
+      <span i18n>Benchmarks</span>
+      <sup i18n>Beta</sup>
+      <gf-premium-indicator
+        *ngIf="user?.subscription?.type === 'Basic'"
+        class="ml-1"
+      ></gf-premium-indicator>
+    </div>
   </div>
-  <div>
-    <mat-form-field appearance="outline" class="w-100">
+  <div class="col-md-6 col-xs-12 d-flex justify-content-end">
+    <mat-form-field appearance="outline" class="w-100" color="accent">
       <mat-label i18n>Compare with...</mat-label>
       <mat-select
         name="benchmark"