fix: stijl consistent leerpaden

frontend/src/components/LearningPathSearchField.vue

@@ -31,4 +31,9 @@
     ></v-text-field>
 </template>
 
-<style scoped></style>
+<style scoped>
+    .search-field {
+        width: 25%;
+        min-width: 300px;
+    }
+</style>

frontend/src/components/LearningPathsGrid.vue

@@ -53,9 +53,9 @@
         white-space: normal;
     }
     .results-grid {
-        margin: 20px;
+        margin: 20px auto;
         display: flex;
-        align-items: stretch;
+        justify-content: center;
         gap: 20px;
         flex-wrap: wrap;
     }

frontend/src/views/SingleTheme.vue

@@ -31,13 +31,14 @@
 </script>
 
 <template>
-    <div class="container">
+    <div class="container d-flex flex-column align-items-center justify-center">
         <using-query-result :query-result="themeQueryResult">
             <h1>{{ currentThemeInfo!!.title }}</h1>
             <p>{{ currentThemeInfo!!.description }}</p>
-            <div class="search-field-container">
+            <br>
+            <div class="search-field-container mt-sm-6">
                 <v-text-field
-                    class="search-field"
+                    class="search-field mx-auto"
                     :label="t('search')"
                     append-inner-icon="mdi-magnify"
                     v-model="searchFilter"
@@ -56,13 +57,15 @@
 
 <style scoped>
     .search-field-container {
-        display: block;
-        margin: 20px;
+        justify-content: center !important;
     }
     .search-field {
-        max-width: 300px;
+        width: 25%;
+        min-width: 300px;
     }
     .container {
         padding: 20px;
+        justify-content: center;
+        justify-items: center;
     }
 </style>

frontend/src/views/learning-paths/LearningPathSearchPage.vue

@@ -17,43 +17,31 @@
 </script>
 
 <template>
-    <v-container class="search-page-container">
-        <v-row
-            justify="center"
-            class="mb-6"
+    <div class="search-page-container d-flex flex-column align-items-center justify-center">
+
+        <div class = "search-field-container">
+            <learning-path-search-field class="mx-auto"/>
+        </div>
+
+        <using-query-result
+            :query-result="searchQueryResults"
+            v-slot="{ data }: { data: LearningPath[] }"
         >
-            <v-col
-                cols="12"
-                sm="8"
-                md="6"
-                lg="4"
-            >
-                <learning-path-search-field class="search-field" />
-            </v-col>
-        </v-row>
+            <learning-paths-grid :learning-paths="data" />
+        </using-query-result>
 
-        <v-row justify="center">
-            <v-col cols="12">
-                <using-query-result
-                    :query-result="searchQueryResults"
-                    v-slot="{ data }: { data: LearningPath[] }"
-                >
-                    <learning-paths-grid :learning-paths="data" />
-                </using-query-result>
+        <div
+            v-if="!query"
+            class="empty-state-container"
+        >
+            <v-empty-state
+                icon="mdi-magnify"
+                :title="t('enterSearchTerm')"
+                :text="t('enterSearchTermDescription')"
+            />
+        </div>
 
-                <div
-                    v-if="!query"
-                    class="empty-state-container"
-                >
-                    <v-empty-state
-                        icon="mdi-magnify"
-                        :title="t('enterSearchTerm')"
-                        :text="t('enterSearchTermDescription')"
-                    />
-                </div>
-            </v-col>
-        </v-row>
-    </v-container>
+    </div>
 </template>
 
 <style scoped>
@@ -61,8 +49,7 @@
         padding-top: 40px;
         padding-bottom: 40px;
     }
-
-    .search-field {
-        max-width: 100%;
+    .search-field-container {
+        justify-content: center !important;
     }
 </style>