reorder items, try again to fix store desc line breaks

webapp/src/App.vue

@@ -44,17 +44,18 @@ const items = [
 ]
 
 const resourceItems = [
+  { title: 'FAQ', icon: 'mdi-help-circle', to: '/what-is-an-alpr' },
   { title: 'Public Records', icon: 'mdi-file-document', to: '/foia' },
   { title: 'City Council', icon: 'mdi-account-voice', to: '/council' },
-  { title: 'FAQ', icon: 'mdi-help-circle', to: '/what-is-an-alpr' },
 ]
 
 const getInvolvedItems = [
+  { title: 'Submit Cameras', icon: 'mdi-map-marker-plus', to: '/report' },
   { title: 'Local Groups', icon: 'mdi-account-group', to: '/groups' },
   { title: 'Contact', icon: 'mdi-email-outline', to: '/contact' },
   { title: 'GitHub', icon: 'mdi-github', href: 'https://github.com/frillweeman/deflock'},
-  { title: 'Submit Cameras', icon: 'mdi-map-marker-plus', to: '/report' },
 ];
+
 const drawer = ref(false)
 
 

webapp/src/views/Store.vue

@@ -57,12 +57,11 @@
           </v-row>
 
           <v-row v-if="collectionDescription" justify="center" class="mb-6">
-            <v-col cols="12" md="8" lg="6" class="text-center">
+            <v-col cols="12" md="8" lg="6" class="text-center collection-description-col">
-              <p class="text-body-2 text-medium-emphasis" style="white-space: pre-line;">
+              <div class="text-body-2 text-medium-emphasis" v-html="collectionDescription" />
-                {{ collectionDescription }}
-              </p>
             </v-col>
           </v-row>
+
  
 
           <!-- Skeleton while Shopify SDK initialises -->
@@ -601,7 +600,7 @@ async function fetchCollectionDescription(id: string): Promise<void> {
         query: `
           query CollectionDescription($id: ID!) {
             collection(id: $id) {
-              description
+              descriptionHtml
             }
           }
         `,
@@ -613,7 +612,8 @@ async function fetchCollectionDescription(id: string): Promise<void> {
       return;
     }
     const json = await response.json();
-    collectionDescription.value = json?.data?.collection?.description ?? '';
+    collectionDescription.value = json?.data?.collection?.descriptionHtml ?? '';
+
   } catch {
     collectionDescription.value = '';
   }
@@ -765,3 +765,16 @@ onMounted(() => {
   fetchCollectionDescription(collectionId.value);
 });
 </script>
+
+<style scoped>
+/* Shopify's descriptionHtml comes back as raw <p>/<br>/etc. markup; reset
+   the default browser paragraph margins so multi-paragraph descriptions
+   don't end up with oversized gaps inside this centered column. */
+.collection-description-col :deep(p) {
+  margin: 0 0 0.75rem;
+}
+.collection-description-col :deep(p:last-child) {
+  margin-bottom: 0;
+}
+</style>
+