fix: Upcomming events card responsviness and max width (#35)

UCLALibrary · Sep 4, 2024 · 7fd9b46 · 7fd9b46 · github-actions · Sep 4, 2024
1 parent 9816519
commit 7fd9b46
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -39,6 +39,6 @@
 		"nuxt-graphql-request": "^7.0.5",
 		"sass": "^1.66.1",
 		"ucla-library-design-tokens": "^5.22.0",
-		"ucla-library-website-components": "3.10.0"
+		"ucla-library-website-components": "3.11.0"
 	}
 }
diff --git a/pages/events/[slug].vue b/pages/events/[slug].vue
@@ -225,19 +225,17 @@ const parsedFTVAEventScreeningDetails = computed(() => {
       </div>
     </div>
 
-    <div class="full-width">
-      <SectionWrapper
+    <SectionWrapper
+      v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
+      section-title="Upcoming events in this series"
+      theme="paleblue"
+    >
+      <SectionTeaserCard
         v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
-        section-title="Upcoming events in this series"
-        theme="paleblue"
-      >
-        <SectionTeaserCard
-          v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
-          data-test="event-series"
-          :items="parsedFtvaEventSeries"
-        />
-      </SectionWrapper>
-    </div>
+        data-test="event-series"
+        :items="parsedFtvaEventSeries"
+      />
+    </SectionWrapper>
   </main>
 </template>
 
@@ -328,16 +326,6 @@ $pale-blue: #E7EDF2;
     }
   }
 
-  .full-width {
-    width: 100%;
-    background-color: $pale-blue;
-    margin: 0 auto;
-
-    .section-wrapper.theme-paleblue {
-      background-color: $pale-blue;
-    }
-  }
-
   /* makes all EventSeries same height */
   :deep(.card) {
     min-height: 350px;

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml