Move main content padding frm the app root component to the views

src/App.vue

@@ -45,8 +45,7 @@ watch(colorScheme, val => updateColorScheme(val))
 .main-content {
     --main-content-padding-x: 30px;
     --main-content-padding-y: 40px;
-    padding: var(--main-content-padding-y) var(--main-content-padding-x) 0;
+    --main-content-padding: var(--main-content-padding-y) var(--main-content-padding-x) 0;
-    width: calc(100% - var(--main-content-padding-x) * 2);
     flex-grow: 1;
 }
 

src/features/search/views/SearchResultsView.vue

@@ -28,7 +28,7 @@ searchQueryModel.value = props.searchQuery;
 </script>
 
 <template>
-    <div>
+    <div class="main-content-padding">
         <Searchbar class="search-bar" v-model="searchQueryModel" auto-submit />
         
         <div class="search-results-error-message-container">

src/styles/common.css

@@ -29,4 +29,9 @@ body {
 
 input {
     color: var(--dark);
+}
+
+.main-content-padding {
+    padding: var(--main-content-padding);
+    width: calc(100% - var(--main-content-padding-x) * 2);
 }

src/views/NotFound.vue

@@ -21,7 +21,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <div class="not-found">
+    <div class="not-found main-content-padding">
        <span class="error-message">
             {{ t('error.pageNotFound') }}
         </span>

src/views/SearchView.vue

@@ -32,7 +32,7 @@ const submitSearch = function () {
 </script>
 
 <template>
-    <div class="search-content">
+    <div class="search-content main-content-padding">
     <header class="global-header">
         <img :src="logo" alt="Seekra" class="header-logo" />
         <span class="slogan">