From a488553962be3ea95dab67d867e4e647f686d990 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Wed, 29 Nov 2023 14:37:53 -0800
Subject: [PATCH 1/3] Reworked style for desktop layouts to behave more
 consistently

---
 frontend/src/assets/main.css                | 46 +++++++++++++--------
 frontend/src/components/AuthoritySelect.vue |  9 +---
 frontend/src/components/DistrictSelect.vue  |  2 +-
 frontend/src/components/Footer.vue          |  2 +-
 frontend/src/components/OffshoreSelect.vue  | 24 ++++-------
 frontend/src/components/SchoolSelect.vue    | 25 ++++++-----
 frontend/src/views/HomeView.vue             | 21 ++++------
 7 files changed, 60 insertions(+), 69 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 99347e45..caaab610 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,28 +1,33 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0rem;
   font-family: 'BCSans', 'Noto Sans', Verdana, Arial, sans-serif;
   font-weight: normal;
 }
 
+#main {
+  max-width: 1280px;
+  padding: 0rem;
+}
+
 a {
   color: #2a6496;
 }
 
+div.v-application__wrap {
+  min-height: 100vh; /* override dvh property */
+}
+
+.full-width {
+  margin-left: calc(-1*(100vw - 1024px)/2);
+  margin-right: calc(-1*(100vw - 1024px)/2);
+}
+
 @media (max-width: 768px) {
   #app {
     min-width: 1130px; /* Adjust as needed */
     padding: 0; /* Adjust as needed */
   }
-
-  .full-width {
-    margin: 0 calc(-1*(100vw - 768px)/2);
-    padding: 0 calc((100vw - 768px)/2);
-    background-color: red;
-  }
 }
 .school-search{
   margin-left:175px
@@ -43,10 +48,12 @@ button.link-btn, .link-btn .v-btn__content {
 }
 
 .territorial-acknowledgement {
-  background-color: #494949;
-  color: #fff;
-  border-bottom: 3px solid #FCBA19;
-  border-top: 3px solid #FCBA19;
+  background-color: #292929;
+  color: #faf9f8;
+  font-size: 14px;
+  line-height: 21px;
+  border-bottom: 4px solid #FCBA19;
+  border-top: 4px solid #FCBA19;
 }
 
 .v-toolbar__extension {
@@ -76,11 +83,14 @@ button.link-btn, .link-btn .v-btn__content {
 
   #app {
     display: grid;
-    padding: 0;
+    padding: 0!important;
+    margin: 0 auto;
   }
 
-  .full-width {
-    margin: 0 calc(-1*(100vw - 1024px)/2);
-    padding: 0 calc((100vw - 1024px)/2);
-  }
+  /* .full-width {
+    position: relative;
+    width: 100vw;
+    left: calc(-1*(100vw - 1280px)/2);
+    padding: 0!important;
+  } */
 }
diff --git a/frontend/src/components/AuthoritySelect.vue b/frontend/src/components/AuthoritySelect.vue
index 747f11dd..4dd969ca 100644
--- a/frontend/src/components/AuthoritySelect.vue
+++ b/frontend/src/components/AuthoritySelect.vue
@@ -19,17 +19,10 @@ function goToAuthority() {
     }
   })
 }
-
-function downloadAuthorityMailing() {
-  alert('TODO - Implement authority mailing download')
-}
-function downloadAuthorityContacts() {
-  alert('TODO - Implement authority contacts download')
-}
 </script>
 
 <template>
-  <v-card class="px-6 py-4 mt-5">
+  <v-card class="px-6 py-4 w-100">
     <h2 class="mb-5">Independent Authorities</h2>
     <v-row no-gutters>
       <v-col class="ma-1">
diff --git a/frontend/src/components/DistrictSelect.vue b/frontend/src/components/DistrictSelect.vue
index 9a7351c9..7558e23c 100644
--- a/frontend/src/components/DistrictSelect.vue
+++ b/frontend/src/components/DistrictSelect.vue
@@ -30,7 +30,7 @@ function downloadDistrictsMailing() {
 </script>
 
 <template>
-  <v-card class="px-6 py-4 mt-5">
+  <v-card class="px-6 py-4 w-100">
     <h2 class="mb-5">School Districts</h2>
     <v-row no-gutters justify="space-between">
       <v-col class="ma-1">
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
index e37a46ac..76957f19 100644
--- a/frontend/src/components/Footer.vue
+++ b/frontend/src/components/Footer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <v-footer class="full-width">
+  <v-footer class="full-width pa-0">
     <v-col no-gutters justify="space-between"
       ><v-row class="territorial-acknowledgement"
         ><v-spacer /><v-col cols="6"
diff --git a/frontend/src/components/OffshoreSelect.vue b/frontend/src/components/OffshoreSelect.vue
index 9dcfb04b..6e949134 100644
--- a/frontend/src/components/OffshoreSelect.vue
+++ b/frontend/src/components/OffshoreSelect.vue
@@ -1,33 +1,25 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useAppStore } from '@/stores/app'
+//import { ref } from 'vue'
+//import { useAppStore } from '@/stores/app'
 import router from '@/router'
-import { useSanitizeURL } from '@/composables/string'
+//import { useSanitizeURL } from '@/composables/string'
 
 // Type Imports
-import type { ListSchool } from '@/types/types'
-import type { Ref } from 'vue'
+//import type { ListSchool } from '@/types/types'
+//import type { Ref } from 'vue'
 
-const appStore = useAppStore()
-const selectedOffshoreSchool: Ref<ListSchool | null> = ref(null)
+//const appStore = useAppStore()
+//const selectedOffshoreSchool: Ref<ListSchool | null> = ref(null)
 
 function viewOffshoreSchools() {
   router.push({
     name: 'offshore'
   })
 }
-
-function downloadOffshoreSchoolInfo() {
-  alert('TODO - Implement offshore school info extract download')
-}
-
-function downloadOffshoreSchoolReps() {
-  alert('TODO - Implement offshore school representative extract download')
-}
 </script>
 
 <template>
-  <v-card class="px-6 py-4 mt-5">
+  <v-card class="px-6 py-4 w-100">
     <h2 class="mb-5">BC Offshore Schools</h2>
     <v-row no-gutters>
       <v-col class="ma-1">
diff --git a/frontend/src/components/SchoolSelect.vue b/frontend/src/components/SchoolSelect.vue
index 234a29c3..5b095bd6 100644
--- a/frontend/src/components/SchoolSelect.vue
+++ b/frontend/src/components/SchoolSelect.vue
@@ -33,16 +33,17 @@ function goToSchoolSearch() {
 </script>
 
 <template>
-  <v-container fluid class="pt-0">
-    <v-sheet elevation="2" class="py-6 full-width">
+  <v-sheet elevation="2" class="py-6 full-width">
+    <v-container class="main">
       <v-row no-gutters justify="space-between">
-        <img
-          src="@/assets/images/BCMapGraphic.png"
-          alt="Map of British Columbia"
-          style="height: 268px; position: absolute; top: 50px; left: -80px"
-        />
-        <v-spacer />
-        <v-col lg="6" md="8" class="ml-0 py-6 school-search">
+        <v-col>
+          <img
+            src="@/assets/images/BCMapGraphic.png"
+            alt="Map of British Columbia"
+            style="height: 268px; position: absolute; top: 50px; left: -80px"
+          />
+        </v-col>
+        <v-col cols="12" md="8" class="ml-0 py-6 school-search">
           <h2 class="mb-5">Find a School in BC</h2>
           <v-row>
             <v-autocomplete
@@ -64,7 +65,6 @@ function goToSchoolSearch() {
               class="mx-3"
             />
           </v-row>
-
           <v-row>
             <v-col class="px-0 my-1">
               <v-btn
@@ -76,7 +76,6 @@ function goToSchoolSearch() {
                 Schools</v-btn
               >
             </v-col>
-            <v-spacer />
             <v-col>
               <DownloadSchoolsModal></DownloadSchoolsModal>
             </v-col>
@@ -84,6 +83,6 @@ function goToSchoolSearch() {
         </v-col>
         <v-spacer />
       </v-row>
-    </v-sheet>
-  </v-container>
+    </v-container>
+  </v-sheet>
 </template>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index e9b5cd31..39c78b21 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -6,29 +6,26 @@ import SchoolSelect from '../components/SchoolSelect.vue'
 </script>
 
 <template>
-  <div>
-    <!-- <v-breadcrumbs
-      bg-color="primary"
-      class="breadcrumbs"
-      :items="[{ title: 'Home', href: '/' }]"
-    ></v-breadcrumbs> -->
+  <v-container fluid class="pa-0">
     <v-col no-gutters>
       <v-row>
-        <SchoolSelect />
+        <v-col class="pa-0">
+          <SchoolSelect />
+        </v-col>
       </v-row>
-      <v-row no-gutters>
-        <v-col class="d-flex align-stretch ma-2">
+      <v-row justify="center">
+        <v-col cols="8" md="4" class="d-flex py-6">
           <DistrictSelect />
         </v-col>
 
-        <v-col class="d-flex align-stretch ma-2">
+        <v-col cols="8" md="4" class="d-flex py-6">
           <AuthoritySelect />
         </v-col>
 
-        <v-col class="d-flex align-stretch ma-2">
+        <v-col cols="8" md="4" class="d-flex py-6">
           <OffshoreSelect />
         </v-col>
       </v-row>
     </v-col>
-  </div>
+  </v-container>
 </template>

From 3954adcbfe4a766df61bc0a345c78df9d950582d Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Wed, 29 Nov 2023 14:45:52 -0800
Subject: [PATCH 2/3] removed console log

---
 frontend/src/stores/app.ts          | 1 -
 frontend/src/views/DistrictView.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts
index 23f02a98..2d9db979 100644
--- a/frontend/src/stores/app.ts
+++ b/frontend/src/stores/app.ts
@@ -105,7 +105,6 @@ export const useAppStore = defineStore('app', {
     },
     async setCodes() {
       await InstituteService.loadCache().then((response) => {
-          console.log(response)
       }).catch((error) => {
         console.error("ERRPR LOADING CACHE" + error)
       })
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index 09261118..b36d4e0d 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -175,7 +175,6 @@ onMounted(async () => {
 
 <template>
   <div>
-    <v-spacer />
     <v-breadcrumbs
       class="breadcrumbs"
       bg-color="white"

From 63665781fa8f98c0bf4573835605194646385a44 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Thu, 30 Nov 2023 09:09:41 -0800
Subject: [PATCH 3/3] Improvements for mobile view on landing page

---
 frontend/src/assets/main.css            |   7 +-
 frontend/src/views/AuthorityView.vue    |  96 +++++++++--------
 frontend/src/views/ContactsView.vue     |  56 +++++-----
 frontend/src/views/DistrictView.vue     | 102 +++++++++---------
 frontend/src/views/HomeView.vue         |   8 +-
 frontend/src/views/SchoolSearchView.vue |  80 +++++++-------
 frontend/src/views/SchoolView.vue       | 138 ++++++++++++------------
 7 files changed, 252 insertions(+), 235 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index caaab610..5b439ef2 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -25,9 +25,14 @@ div.v-application__wrap {
 
 @media (max-width: 768px) {
   #app {
-    min-width: 1130px; /* Adjust as needed */
+    /* min-width: 600px; */
     padding: 0; /* Adjust as needed */
   }
+
+  .full-width {
+    margin-left: calc(-1*(100vw - 400px)/2);
+    margin-right: calc(-1*(100vw - 400px)/2);
+  }
 }
 .school-search{
   margin-left:175px
diff --git a/frontend/src/views/AuthorityView.vue b/frontend/src/views/AuthorityView.vue
index 3910b4ee..148ad3a8 100644
--- a/frontend/src/views/AuthorityView.vue
+++ b/frontend/src/views/AuthorityView.vue
@@ -212,54 +212,56 @@ onMounted(async () => {
       ]"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <v-row no-gutters justify="space-between">
-        <v-col>
-          <h1 class="mt-3 mb-2">
-            {{ authority.value.authorityData?.authorityNumber }} -
-            {{ authority.value.authorityData?.displayName }}
-          </h1>
-          <v-row v-if="authority.value.authorityData">
-            <v-col>
-              <p>
-                <strong>Phone:</strong>
-                {{ formatPhoneNumber(authority.value.authorityData?.phoneNumber) }}
-              </p>
-              <p>
-                <strong>Fax:</strong>
-                {{ formatPhoneNumber(authority.value.authorityData?.faxNumber) }}
-              </p>
-              <p>
-                <strong>Email: </strong>
-                <a :href="'mailto:' + authority.value.authorityData?.email">{{
-                  authority.value.authorityData?.email
-                }}</a>
-              </p>
-            </v-col>
-            <v-col
-              v-for="item in authority.value.authorityData.addresses"
-              :key="item.addressTypeCode"
-            >
-              <DisplayAddress v-bind="item" />
-            </v-col>
-            <v-col>
-              <v-btn
-                variant="text"
-                class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                @click="downloadAuthorityContacts()"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                Authority Contacts (CSV)</v-btn
-              >
-              <v-btn
-                variant="text"
-                class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                @click="downloadAuthoritySchools()"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                Authority Schools (CSV)</v-btn
+      <v-container class="main">
+        <v-row no-gutters justify="space-between">
+          <v-col>
+            <h1 class="mt-3 mb-2">
+              {{ authority.value.authorityData?.authorityNumber }} -
+              {{ authority.value.authorityData?.displayName }}
+            </h1>
+            <v-row v-if="authority.value.authorityData">
+              <v-col>
+                <p>
+                  <strong>Phone:</strong>
+                  {{ formatPhoneNumber(authority.value.authorityData?.phoneNumber) }}
+                </p>
+                <p>
+                  <strong>Fax:</strong>
+                  {{ formatPhoneNumber(authority.value.authorityData?.faxNumber) }}
+                </p>
+                <p>
+                  <strong>Email: </strong>
+                  <a :href="'mailto:' + authority.value.authorityData?.email">{{
+                    authority.value.authorityData?.email
+                  }}</a>
+                </p>
+              </v-col>
+              <v-col
+                v-for="item in authority.value.authorityData.addresses"
+                :key="item.addressTypeCode"
               >
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
+                <DisplayAddress v-bind="item" />
+              </v-col>
+              <v-col>
+                <v-btn
+                  variant="text"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  @click="downloadAuthorityContacts()"
+                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                  Authority Contacts (CSV)</v-btn
+                >
+                <v-btn
+                  variant="text"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  @click="downloadAuthoritySchools()"
+                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                  Authority Schools (CSV)</v-btn
+                >
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-container>
     </v-sheet>
     <!-- END Authority Info Header Block -->
     <v-sheet class="pa-6">
diff --git a/frontend/src/views/ContactsView.vue b/frontend/src/views/ContactsView.vue
index b9eaaad9..803c5281 100644
--- a/frontend/src/views/ContactsView.vue
+++ b/frontend/src/views/ContactsView.vue
@@ -108,33 +108,35 @@ onMounted(() => {
       :items="[{ title: 'Home', href: '/' }, 'Contacts by Type']"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <v-row no-gutters justify="space-between">
-        <v-spacer />
-        <v-col cols="12">
-          <h2 class="mt-3 mb-2">Find District Contacts by Type</h2>
-          <v-row>
-            <v-autocomplete
-              v-model="selectedContactType"
-              label="Select a Contact by Type"
-              :items="appStore.getDistrictContactTypeCodes"
-              item-title="label"
-              item-value="districtContactTypeCode"
-            ></v-autocomplete>
-            <v-btn
-              @click="searchContact"
-              icon="mdi-magnify"
-              color="primary"
-              variant="flat"
-              rounded="lg"
-              size="large"
-              class="text-none text-subtle-1 ml-3"
-            />
-          </v-row>
-          <v-btn @click="resetContactFilters" variant="outlined" color="primary" class="text-none"
-            >Reset</v-btn
-          >
-        </v-col>
-      </v-row>
+      <v-container class="main">
+        <v-row no-gutters justify="space-between">
+          <v-spacer />
+          <v-col cols="12">
+            <h2 class="mt-3 mb-2">Find District Contacts by Type</h2>
+            <v-row>
+              <v-autocomplete
+                v-model="selectedContactType"
+                label="Select a Contact by Type"
+                :items="appStore.getDistrictContactTypeCodes"
+                item-title="label"
+                item-value="districtContactTypeCode"
+              ></v-autocomplete>
+              <v-btn
+                @click="searchContact"
+                icon="mdi-magnify"
+                color="primary"
+                variant="flat"
+                rounded="lg"
+                size="large"
+                class="text-none text-subtle-1 ml-3"
+              />
+            </v-row>
+            <v-btn @click="resetContactFilters" variant="outlined" color="primary" class="text-none"
+              >Reset</v-btn
+            >
+          </v-col>
+        </v-row>
+      </v-container>
     </v-sheet>
     <!-- END Contacts by Type header-->
     <v-container>
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index b36d4e0d..84052634 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -186,58 +186,60 @@ onMounted(async () => {
     ></v-breadcrumbs>
 
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <v-row no-gutters justify="space-between">
-        <v-col v-if="district.value.districtData">
-          <v-row no-gutters>
-            <h1 class="mt-3 mb-2">
-              {{ district.value.districtData?.districtNumber }} -
-              {{ district.value.districtData?.displayName }}
-            </h1>
-          </v-row>
-          <v-row no-gutters justify="space-between">
-            <v-col>
-              <p>
-                <strong>Phone:</strong>
-                {{ formatPhoneNumber(district.value.districtData?.phoneNumber) }}
-              </p>
-              <p>
-                <strong>Fax:</strong>
-                {{ formatPhoneNumber(district.value.districtData?.faxNumber) }}
-              </p>
-              <p><strong>Email:</strong> {{ district.value.districtData?.email }}</p>
-              <p>
-                <a :href="district.value.districtData?.website">{{
-                  district.value.districtData?.website
-                }}</a>
-              </p>
-            </v-col>
-
-            <v-col
-              v-for="item in district.value.districtData.addresses"
-              :key="item.addressTypeCode"
-            >
-              <DisplayAddress v-bind="item" />
-            </v-col>
+      <v-container class="main">
+        <v-row no-gutters justify="space-between">
+          <v-col v-if="district.value.districtData">
+            <v-row no-gutters>
+              <h1 class="mt-3 mb-2">
+                {{ district.value.districtData?.districtNumber }} -
+                {{ district.value.districtData?.displayName }}
+              </h1>
+            </v-row>
+            <v-row no-gutters justify="space-between">
+              <v-col>
+                <p>
+                  <strong>Phone:</strong>
+                  {{ formatPhoneNumber(district.value.districtData?.phoneNumber) }}
+                </p>
+                <p>
+                  <strong>Fax:</strong>
+                  {{ formatPhoneNumber(district.value.districtData?.faxNumber) }}
+                </p>
+                <p><strong>Email:</strong> {{ district.value.districtData?.email }}</p>
+                <p>
+                  <a :href="district.value.districtData?.website">{{
+                    district.value.districtData?.website
+                  }}</a>
+                </p>
+              </v-col>
 
-            <v-col>
-              <v-btn
-                variant="text"
-                class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                @click="downloadDistrictContacts"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                District Contacts (CSV)</v-btn
+              <v-col
+                v-for="item in district.value.districtData.addresses"
+                :key="item.addressTypeCode"
               >
-              <v-btn
-                variant="text"
-                class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                @click="downloadDistrictSchools"
-                ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                District Schools (CSV)</v-btn
-              >
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
+                <DisplayAddress v-bind="item" />
+              </v-col>
+
+              <v-col>
+                <v-btn
+                  variant="text"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  @click="downloadDistrictContacts"
+                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                  District Contacts (CSV)</v-btn
+                >
+                <v-btn
+                  variant="text"
+                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                  @click="downloadDistrictSchools"
+                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                  District Schools (CSV)</v-btn
+                >
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-container>
     </v-sheet>
     <!-- END DISTRICT HEADER INFO -->
 
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 39c78b21..77769223 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -13,16 +13,16 @@ import SchoolSelect from '../components/SchoolSelect.vue'
           <SchoolSelect />
         </v-col>
       </v-row>
-      <v-row justify="center">
-        <v-col cols="8" md="4" class="d-flex py-6">
+      <v-row justify="center" class="pa-2 pa-md-0">
+        <v-col cols="12" md="4" class="d-flex py-md-6 pa-2 px-md-3">
           <DistrictSelect />
         </v-col>
 
-        <v-col cols="8" md="4" class="d-flex py-6">
+        <v-col cols="12" md="4" class="d-flex py-md-6 pa-2 px-md-3">
           <AuthoritySelect />
         </v-col>
 
-        <v-col cols="8" md="4" class="d-flex py-6">
+        <v-col cols="12" md="4" class="d-flex py-md-6 pa-2 px-md-3">
           <OffshoreSelect />
         </v-col>
       </v-row>
diff --git a/frontend/src/views/SchoolSearchView.vue b/frontend/src/views/SchoolSearchView.vue
index e2a89493..f06cf585 100644
--- a/frontend/src/views/SchoolSearchView.vue
+++ b/frontend/src/views/SchoolSearchView.vue
@@ -201,45 +201,47 @@ onBeforeMount(async () => {
       :items="[{ title: 'Home', href: '/' }, 'Search']"
     ></v-breadcrumbs>
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <h2>Find Schools</h2>
-      <v-row>
-        <v-col cols="12" md="3">
-          <v-select
-            v-model="selectedJurisdiction"
-            :items="jurisdictions"
-            item-title="label"
-            item-value="schoolCategoryCode"
-            label="Category"
-            multiple
-          ></v-select>
-        </v-col>
-        <v-col cols="12" md="3">
-          <v-select
-            v-model="selectedType"
-            item-title="label"
-            item-value="facilityTypeCode"
-            :items="types"
-            label="Types"
-            multiple
-          ></v-select>
-        </v-col>
-        <v-col cols="12" md="3"
-          ><v-btn
-            icon="mdi-magnify"
-            color="primary"
-            variant="flat"
-            rounded="lg"
-            size="large"
-            @click="searchSchools"
-            class="text-none text-subtle-1 ml-3"
-        /></v-col>
-        <v-col cols="12">
-          <v-btn @click="resetFilters" variant="outlined" color="primary" class="text-none"
-            >Reset</v-btn
-          >
-          <!-- <v-btn @click="searchSchools" color="primary">Search</v-btn> -->
-        </v-col>
-      </v-row>
+      <v-container class="main">
+        <h2>Find Schools</h2>
+        <v-row>
+          <v-col cols="12" md="3">
+            <v-select
+              v-model="selectedJurisdiction"
+              :items="jurisdictions"
+              item-title="label"
+              item-value="schoolCategoryCode"
+              label="Category"
+              multiple
+            ></v-select>
+          </v-col>
+          <v-col cols="12" md="3">
+            <v-select
+              v-model="selectedType"
+              item-title="label"
+              item-value="facilityTypeCode"
+              :items="types"
+              label="Types"
+              multiple
+            ></v-select>
+          </v-col>
+          <v-col cols="12" md="3"
+            ><v-btn
+              icon="mdi-magnify"
+              color="primary"
+              variant="flat"
+              rounded="lg"
+              size="large"
+              @click="searchSchools"
+              class="text-none text-subtle-1 ml-3"
+          /></v-col>
+          <v-col cols="12">
+            <v-btn @click="resetFilters" variant="outlined" color="primary" class="text-none"
+              >Reset</v-btn
+            >
+            <!-- <v-btn @click="searchSchools" color="primary">Search</v-btn> -->
+          </v-col>
+        </v-row>
+      </v-container>
     </v-sheet>
 
     <v-card class="pa-6" width="100%">
diff --git a/frontend/src/views/SchoolView.vue b/frontend/src/views/SchoolView.vue
index ce05d422..5a69e632 100644
--- a/frontend/src/views/SchoolView.vue
+++ b/frontend/src/views/SchoolView.vue
@@ -203,74 +203,78 @@ function goToDistrict() {
     ></v-breadcrumbs>
 
     <v-sheet style="z-index: 100; position: relative" elevation="2" class="py-6 full-width">
-      <v-row no-gutters justify="space-between">
-        <v-row v-if="schoolData.value" no-gutters justify="space-between">
-          <v-col>
-            <v-row no-gutters>
-              <h1 class="mt-3 mb-2">
-                {{ schoolData.value.mincode }} - {{ schoolData.value.displayName }}
-              </h1>
-            </v-row>
-            <v-row no-gutters class="mt-0 mb-1">
-              <a
-                v-if="schoolData.value.schoolCategoryCode == 'PUBLIC'"
-                id="district-link"
-                :href="`/district/${useSanitizeURL(
-                  String(districtInfo.value?.districtNumber)
-                )}-${useSanitizeURL(String(districtInfo.value?.displayName))}`"
-              >
-                District {{ districtInfo.value.districtNumber }} -
-                {{ districtInfo.value.displayName }}
-              </a>
-              <a
-                id="authority-link"
-                :href="`/authority/${authorityInfo.value.authorityNumber}-${authorityInfo.value.displayName}`"
-                v-if="schoolData.value?.independentAuthorityId && authorityInfo.value"
-                class="ml-1"
-              >
-                Independent Authority {{ authorityInfo.value.authorityNumber }} -
-                {{ authorityInfo.value.displayName }}
-              </a>
-            </v-row>
-            <v-row no-gutters class="mt-1 mb-4">
-              <v-chip
-                v-for="grade in filteredGradesLabels"
-                :key="grade"
-                class="mr-1"
-                size="small"
-                color="primary"
-                label
-                >{{ grade }}</v-chip
-              >
-            </v-row>
-            <v-row no-gutters>
-              <v-col class="pl-0">
-                <p><strong>Phone:</strong> {{ formatPhoneNumber(schoolData.value.phoneNumber) }}</p>
-                <p><strong>Fax:</strong> {{ formatPhoneNumber(schoolData.value.faxNumber) }}</p>
-                <p>
-                  <strong>Email: </strong>
-                  <a :href="'mailto:' + schoolData.value?.email">
-                    {{ schoolData.value.email }}
-                  </a>
-                </p>
-              </v-col>
-              <v-col v-for="item in schoolData.value.addresses" :key="item.addressTypeCode">
-                <DisplayAddress v-bind="item" />
-              </v-col>
-              <v-col
-                ><v-btn
-                  variant="text"
-                  class="text-none text-subtitle-1 ma-1 v-btn-align-left"
-                  @click="downloadCSV"
-                  :disabled="!schoolData.value"
-                  ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
-                  School Info (CSV)</v-btn
-                ></v-col
-              >
-            </v-row>
-          </v-col>
+      <v-container class="main">
+        <v-row no-gutters justify="space-between">
+          <v-row v-if="schoolData.value" no-gutters justify="space-between">
+            <v-col>
+              <v-row no-gutters>
+                <h1 class="mt-3 mb-2">
+                  {{ schoolData.value.mincode }} - {{ schoolData.value.displayName }}
+                </h1>
+              </v-row>
+              <v-row no-gutters class="mt-0 mb-1">
+                <a
+                  v-if="schoolData.value.schoolCategoryCode == 'PUBLIC'"
+                  id="district-link"
+                  :href="`/district/${useSanitizeURL(
+                    String(districtInfo.value?.districtNumber)
+                  )}-${useSanitizeURL(String(districtInfo.value?.displayName))}`"
+                >
+                  District {{ districtInfo.value.districtNumber }} -
+                  {{ districtInfo.value.displayName }}
+                </a>
+                <a
+                  id="authority-link"
+                  :href="`/authority/${authorityInfo.value.authorityNumber}-${authorityInfo.value.displayName}`"
+                  v-if="schoolData.value?.independentAuthorityId && authorityInfo.value"
+                  class="ml-1"
+                >
+                  Independent Authority {{ authorityInfo.value.authorityNumber }} -
+                  {{ authorityInfo.value.displayName }}
+                </a>
+              </v-row>
+              <v-row no-gutters class="mt-1 mb-4">
+                <v-chip
+                  v-for="grade in filteredGradesLabels"
+                  :key="grade"
+                  class="mr-1"
+                  size="small"
+                  color="primary"
+                  label
+                  >{{ grade }}</v-chip
+                >
+              </v-row>
+              <v-row no-gutters>
+                <v-col class="pl-0">
+                  <p>
+                    <strong>Phone:</strong> {{ formatPhoneNumber(schoolData.value.phoneNumber) }}
+                  </p>
+                  <p><strong>Fax:</strong> {{ formatPhoneNumber(schoolData.value.faxNumber) }}</p>
+                  <p>
+                    <strong>Email: </strong>
+                    <a :href="'mailto:' + schoolData.value?.email">
+                      {{ schoolData.value.email }}
+                    </a>
+                  </p>
+                </v-col>
+                <v-col v-for="item in schoolData.value.addresses" :key="item.addressTypeCode">
+                  <DisplayAddress v-bind="item" />
+                </v-col>
+                <v-col
+                  ><v-btn
+                    variant="text"
+                    class="text-none text-subtitle-1 ma-1 v-btn-align-left"
+                    @click="downloadCSV"
+                    :disabled="!schoolData.value"
+                    ><template v-slot:prepend> <v-icon icon="mdi-download" /> </template>Download
+                    School Info (CSV)</v-btn
+                  ></v-col
+                >
+              </v-row>
+            </v-col>
+          </v-row>
         </v-row>
-      </v-row>
+      </v-container>
     </v-sheet>
 
     <v-card class="fill-screen-height pa-6" width="100%" v-if="schoolData.value">