Add containers to components without a content container

src/features/search/components/Searchbar.vue

@@ -36,18 +36,20 @@ const submitSearch = function () {
 </script>
 
 <template>
-    <form @submit.prevent="submitSearch">
+    <div>
-        <div class="search-wrapper">
+        <form @submit.prevent="submitSearch">
-            <input
+            <div class="search-wrapper">
+                <input
                 v-model="searchQuery"
                 type="search"
                 :placeholder="t('search.searchBar.placeholder')"
                 required
-            />
+                />
-            <button type="submit" class="search-button">{{ t('search.searchBar.submit') }}</button>
+                <button type="submit" class="search-button">{{ t('search.searchBar.submit') }}</button>
-        </div>
+            </div>
-    </form>
+        </form>
-    </template>
+    </div>
+</template>
 
 <style scoped>
 .search-wrapper {

src/features/search/views/SearchResultsView.vue

@@ -28,15 +28,17 @@ searchQueryModel.value = props.searchQuery;
 </script>
 
 <template>
-    <Searchbar class="search-bar" v-model="searchQueryModel" auto-submit />
+    <div>
+        <Searchbar class="search-bar" v-model="searchQueryModel" auto-submit />
         
-    <div class="search-results-error-message-container">
+        <div class="search-results-error-message-container">
-        <div class="search-results-error-message">
+            <div class="search-results-error-message">
-            <p>{{ t('search.error.searchNotAvailable') }}</p>
+                <p>{{ t('search.error.searchNotAvailable') }}</p>
-            <p>{{ t('error.tryAgainToAnotherTime') }}</p>
+                <p>{{ t('error.tryAgainToAnotherTime') }}</p>
+            </div>
+        </div>
+        <div class="search-results-container">
         </div>
-    </div>
-    <div class="search-results-container">
     </div>
 </template>