From d08c7f45afa5238fdb950fecc6c7a4ae471c5dfb Mon Sep 17 00:00:00 2001
From: Armin Stanitzok <21990230+GODrums@users.noreply.github.com>
Date: Wed, 16 Oct 2024 11:35:05 +0200
Subject: [PATCH] Fix: Improve filter layout for mobile (#120)

---
 webapp/src/app/home/home.component.html          |  2 +-
 .../leaderboard/filter/filter.component.html     |  4 ++--
 .../filter/repository/repository.component.ts    | 16 +++++++---------
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/webapp/src/app/home/home.component.html b/webapp/src/app/home/home.component.html
index 19787091..2d9fd936 100644
--- a/webapp/src/app/home/home.component.html
+++ b/webapp/src/app/home/home.component.html
@@ -1,6 +1,6 @@
 <div class="flex flex-col items-center">
   <div class="">
-    <div class="grid grid-cols-1 xl:grid-cols-4 gap-4 xl:gap-8">
+    <div class="grid grid-cols-1 xl:grid-cols-4 gap-y-4 xl:gap-8">
       <div class="space-y-2 col-span-1">
         <div class="flex flex-col gap-2 mb-4">
           <h1 class="text-3xl font-bold">Artemis Leaderboard</h1>
diff --git a/webapp/src/app/home/leaderboard/filter/filter.component.html b/webapp/src/app/home/leaderboard/filter/filter.component.html
index 6ece45f4..cbc4edaf 100644
--- a/webapp/src/app/home/leaderboard/filter/filter.component.html
+++ b/webapp/src/app/home/leaderboard/filter/filter.component.html
@@ -1,9 +1,9 @@
-<div class="inline-flex flex-col gap-2 border rounded-md border-input bg-background p-4">
+<div class="w-full xl:w-fit inline-flex flex-col gap-2 border rounded-md border-input bg-background p-4">
   <span class="flex items-center pb-2 gap-2 text-muted-foreground">
     <lucide-angular [img]="ListFilter" class="size-4" />
     <h3 class="text-base font-semibold tracking-wide">Filter</h3>
   </span>
-  <form ngForm class="flex xl:flex-col gap-4">
+  <form ngForm class="flex flex-wrap gap-4">
     <app-leaderboard-filter-timeframe />
     @if (repositories() && repositories()!.length > 1) {
       <app-leaderboard-filter-repository [repositories]="repositories()!" />
diff --git a/webapp/src/app/home/leaderboard/filter/repository/repository.component.ts b/webapp/src/app/home/leaderboard/filter/repository/repository.component.ts
index a9a3c7ae..982bf837 100644
--- a/webapp/src/app/home/leaderboard/filter/repository/repository.component.ts
+++ b/webapp/src/app/home/leaderboard/filter/repository/repository.component.ts
@@ -26,15 +26,13 @@ export class LeaderboardFilterRepositoryComponent {
   });
 
   options = computed(() => {
-    const options: SelectOption[] = !this.repositories()
-      ? []
-      : this.repositories()!.map((name, index) => {
-          return {
-            id: index + 1,
-            value: name,
-            label: name
-          };
-        });
+    const options: SelectOption[] = this.repositories().map((name, index) => {
+      return {
+        id: index + 1,
+        value: name,
+        label: name
+      };
+    });
     options.unshift({
       id: 0,
       value: 'all',