\n\n\n**questions**\n\n1. is there something i am forgetting to add to my nuxt config or my page level code that is causing this problem? and how to i fix / test for it?\n2. why would there be a difference in the page on the actual phone vs. in the browser dev tools?\n\n\n// page code:\n\n```js\n\u003Ctemplate>\n \u003Cdiv v-if=\"data\">\n \u003Cmultipage-header\n :name=\"data.name\"\n :one-liner=\"data.oneLiner\"\n :sections=\"sections\"\n class=\"bg-background sticky top-0 z-10 transition-all duration-300\"\n :image=\"data.logo\"\n :serply_link=\"data.serplyLink\"\n />\n\n \u003C!-- Main content with grid -->\n \u003Csection class=\"mx-auto max-w-7xl p-4 md:p-6 lg:p-8\">\n \u003Cdiv class=\"grid gap-6 lg:grid-cols-3\">\n \u003C!-- Main Content (70%) -->\n \u003Cdiv class=\"lg:col-span-2\">\n \u003C!-- Overview Section -->\n \u003Ccompany-overview\n v-if=\"data.excerpt\"\n id=\"overview\"\n :company=\"data\"\n class=\"scroll-mt-60\"\n />\n\n \u003C!-- Article Section -->\n \u003Csection\n v-if=\"data.article\"\n class=\"prose dark:prose-invert mt-[-25px]\"\n >\n \u003Cdiv id=\"article\" class=\"mb-8\" v-html=\"data.article\">\u003C/div>\n \u003C/section>\n\n \u003C!-- Features Section -->\n \u003Csection v-if=\"data.features\" class=\"mb-12 space-y-4\">\n \u003Ch2 id=\"features\" class=\"mb-4 scroll-mt-60 text-3xl font-bold\">\n {{ data.name }} Features\n \u003C/h2>\n \u003Carticle v-for=\"feature in data.features\" :key=\"feature.item\">\n \u003Ch3 class=\"mb-2 text-lg font-bold\">{{ feature.item }}\u003C/h3>\n \u003Cp>{{ feature.description }}\u003C/p>\n \u003C/article>\n \u003C/section>\n\n \u003C!-- FAQs Section -->\n \u003Csection v-if=\"faqItems && faqItems.length\" id=\"faqs\" class=\"mb-12\">\n \u003Ch2 class=\"mb-4 scroll-mt-60 text-3xl font-bold\">FAQ\u003C/h2>\n \u003Cu-accordion type=\"multiple\" :items=\"faqItems\" />\n \u003C/section>\n\n \u003C!-- Alternatives -->\n \u003Csection v-if=\"data.alternatives\" class=\"mb-12 p-4\">\n \u003Ch2 id=\"alternatives\" class=\"mb-4 scroll-mt-60 text-3xl font-bold\">\n {{ data.name }} Alternatives\n \u003C/h2>\n \u003Cul class=\"list-disc pl-4\">\n \u003Cli v-for=\"alternative in data.alternatives\" :key=\"alternative\">\n {{ alternative }}\n \u003C/li>\n \u003C/ul>\n \u003C/section>\n \u003C/div>\n\n \u003C!-- Sidebar (30%) -->\n \u003Caside\n v-if=\"\n (data.screenshots && data.screenshots.length) ||\n (data.categories && data.categories.length)\n \"\n class=\"space-y-6 lg:col-span-1\"\n >\n \u003C!-- Left Column: Media Gallery -->\n \u003Cmedia-gallery\n v-if=\"data.screenshots && data.screenshots.length\"\n :company=\"data\"\n />\n\n \u003C!-- Categories -->\n \u003Csection\n v-if=\"data.categories && data.categories.length\"\n class=\"gap-2\"\n >\n \u003Cs-pill base-slug=\"reviews/best\" :items=\"data.categories\" />\n \u003C/section>\n \u003C/aside>\n \u003C/div>\n \u003C/section>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst route = useRoute();\nconst router = useRouter();\nconst { slug } = route.params;\n\nconst data = await useCompany(`${slug}`);\nif (!data) {\n router.push('/404');\n}\n\nconst faqItems = computed(() => {\n if (!data?.faqs) return [];\n\n return data?.faqs.map((faq) => ({\n label: faq.question,\n content: faq.answer\n }));\n});\n\nconst sections = computed(() => {\n const sectionTitles: string[] = [];\n\n sectionTitles.push('Overview');\n\n if (data?.features) {\n sectionTitles.push('Features');\n }\n if (faqItems.value && faqItems.value.length) {\n sectionTitles.push('FAQ');\n }\n\n if (data?.alternatives) {\n sectionTitles.push('Alternatives');\n }\n\n return sectionTitles;\n});\n\nuseSeoMeta({\n title: computed(() =>\n data?.name\n ? `${data.name} - Reviews, Pricing, Features`\n : 'Company Information'\n )\n});\n\u003C/script>\n```\n",[2075,2076,2079],{"name":2019,"color":2020},{"name":2077,"color":2078},"needs reproduction","CB47CF",{"name":2005,"color":2006},3168,"mobile responsiveness issues","2025-03-28T17:34:56Z","https://github.com/nuxt/ui/issues/3168",0.76188457,{"description":2086,"labels":2087,"number":2092,"owner":1991,"repository":1992,"state":2046,"title":2093,"updated_at":2094,"url":2095,"score":2096},"### Description\n\nI have a Slideover with some checkboxes from a 3rd party library. Whenever I close the slideover all values are lost. \r\n\r\nUsing just headless UI I can solve this by using `:unmount=\"false\"` on the `Dialog` and `TransitionRoot` but can't find anything similar on the slideover.\r\n\r\nDid I miss something here?\r\n\r\n\r\nCheers",[2088,2089],{"name":2064,"color":2065},{"name":2090,"color":2091},"upstream","78bddb",1357,"Slideover loosing state","2025-03-28T17:28:27Z","https://github.com/nuxt/ui/issues/1357",0.780245,{"description":2098,"labels":2099,"number":2105,"owner":1991,"repository":1992,"state":2046,"title":2106,"updated_at":2107,"url":2108,"score":2109},"### Description\n\nHello 👋 \n\nis it possible to change the aria label (hardcoded aria-label=\"Switch to light mode\") to something else? It did not work to set it directly on the component and it does not react to different languages. I need it for a german website.\n\nBR",[2100,2101,2102],{"name":2064,"color":2065},{"name":2005,"color":2006},{"name":2103,"color":2104},"pro","5BD3CB",3696,"ColorModeSwitch aria label","2025-03-26T14:25:58Z","https://github.com/nuxt/ui/issues/3696",0.7825406,["Reactive",2111],{},["Set"],["ShallowReactive",2114],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"rR6CJ8APXDG2Hio47hwVT_YhGKPzZ8ROs7ZifLvPP-c":-1},"/nuxt/nuxt.com/1838"]