fix(wrapped): resolve story button styles, card glow clipping, and nav overlap

Author: root

assets/wrapped/tailwind.css

@@ -72,16 +72,17 @@
 .wrapped-scope .blur-3xl {
   filter: blur(64px) !important;
 }
-.wrapped-scope a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-.wrapped-scope button {
-  background-color: transparent;
-  color: inherit;
+@layer base {
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    background-color: transparent;
+    color: inherit;
+  }
 }
 
+@tailwind base;
 .wrapped-scope hr {
   border-color: #111827;
 }

components/wrapped/Stories/Words-3.vue

@@ -4,13 +4,13 @@
     class="text-5xl"
     :title="t('results.words.breakdown.title')"
   >
+    <WrappedStyleGlow />
+
     <div
       v-for="(data, author) in result.getWordUsage.authors"
       :key="author"
-      class="w-full mt-4 max-w-md rounded-3xl bg-white/5 px-8 py-6 text-center shadow-xl shadow-black/40 backdrop-blur-lg"
+      class="relative z-10 w-full mt-4 max-w-md rounded-3xl bg-white/5 px-8 py-6 text-center shadow-xl shadow-black/40 backdrop-blur-lg overflow-hidden"
     >
-      <WrappedStyleGlow />
-
       <div class="text-2xl font-semibold tracking-tight">
         {{ author }}
       </div>

components/wrapped/StoryContainer.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="w-full h-full flex items-center justify-center text-center relative flex-col gap-2 isolate"
+    class="w-full h-full flex items-center justify-center text-center relative flex-col gap-2 isolate pt-8 pb-4 px-4"
   >
     <h2
       v-if="title"
-      class="font-extrabold break-words w-3/4 text-shadow-lg text-shadow-white z-50"
+      class="font-extrabold break-words w-full max-w-xs sm:max-w-sm text-2xl sm:text-3xl text-shadow-lg text-shadow-white z-50 shrink-0 mb-2 leading-tight"
       style="text-shadow: 0 0 3px black"
     >
       {{ title }}