diff --git a/components/Chart.js b/components/Chart.js
index df7d1dd4..887e6c46 100644
--- a/components/Chart.js
+++ b/components/Chart.js
@@ -95,16 +95,13 @@ const Chart = memo(function Chart({
         )}
         {error && (
           <DetailsBox
-            collapsed={false}
             content={
-              <>
-                <details>
-                  <summary>
-                    <span>Error: {error.message}</span>
-                  </summary>
-                  <pre>{JSON.stringify(error, null, 2)}</pre>
-                </details>
-              </>
+              <details>
+                <summary>
+                  <span>Error: {error.message}</span>
+                </summary>
+                <pre>{JSON.stringify(error, null, 2)}</pre>
+              </details>
             }
           />
         )}
diff --git a/components/ConditionalWrapper.js b/components/ConditionalWrapper.js
new file mode 100644
index 00000000..19dd698f
--- /dev/null
+++ b/components/ConditionalWrapper.js
@@ -0,0 +1,12 @@
+// import type { ReactNode } from 'react'
+
+// type ConditionalWrapperProps = {
+//   condition: boolean
+//   wrapper: (children: ReactNode) => ReactNode
+//   children: ReactNode
+// }
+
+const ConditionalWrapper = ({ condition, wrapper, children }) =>
+  condition ? wrapper(children) : children
+
+export default ConditionalWrapper
diff --git a/components/DomainChart.js b/components/DomainChart.js
index 44c7a067..bbb7db30 100644
--- a/components/DomainChart.js
+++ b/components/DomainChart.js
@@ -75,16 +75,13 @@ const Chart = memo(function Chart({ queryParams = {}, setState }) {
         </div>
         {error && (
           <DetailsBox
-            collapsed={false}
             content={
-              <>
-                <details>
-                  <summary>
-                    <span>Error: {error.message}</span>
-                  </summary>
-                  <pre>{JSON.stringify(error, null, 2)}</pre>
-                </details>
-              </>
+              <details>
+                <summary>
+                  <span>Error: {error.message}</span>
+                </summary>
+                <pre>{JSON.stringify(error, null, 2)}</pre>
+              </details>
             }
           />
         )}
diff --git a/components/Layout.js b/components/Layout.js
index 1b497263..aff2c1d4 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -4,12 +4,16 @@ import { useMemo } from 'react'
 import { StyledStickyNavBar } from 'components/SharedStyledComponents'
 import { UserProvider } from 'hooks/useUser'
 import { useRouter } from 'next/router'
+import ConditionalWrapper from './ConditionalWrapper'
 import Footer from './Footer'
 import Header from './Header'
 import NavBar from './NavBar'
 
 const Layout = ({ children }) => {
-  const { pathname } = useRouter()
+  const {
+    pathname,
+    query: { webview },
+  } = useRouter()
 
   const navbarColor = useMemo(() => {
     return pathname === '/' ||
@@ -34,20 +38,25 @@ const Layout = ({ children }) => {
       <div className="site text-sm flex flex-col min-h-[100vh]">
         <div className="flex-[1_0_auto]">
           <Header />
-          {navbarSticky ? (
-            <StyledStickyNavBar>
+          {!webview && (
+            <ConditionalWrapper
+              condition={!!navbarSticky}
+              wrapper={(children) => (
+                <StyledStickyNavBar>{children}</StyledStickyNavBar>
+              )}
+            >
               <NavBar color={navbarColor} />
-            </StyledStickyNavBar>
-          ) : (
-            <NavBar color={navbarColor} />
+            </ConditionalWrapper>
           )}
           <div className={`content ${!navbarColor && 'mt-[-66px]'}`}>
             {children}
           </div>
         </div>
-        <div className="flex-shrink-0">
-          <Footer />
-        </div>
+        {!webview && (
+          <div className="flex-shrink-0">
+            <Footer />
+          </div>
+        )}
       </div>
     </UserProvider>
   )
diff --git a/components/aggregation/mat/Filters.js b/components/aggregation/mat/Filters.js
index 68f7a22d..8e72cd8c 100644
--- a/components/aggregation/mat/Filters.js
+++ b/components/aggregation/mat/Filters.js
@@ -312,10 +312,7 @@ const Filters = ({ data = [], tableData, setDataForCharts, query }) => {
   })
 
   return (
-    <DetailsBox
-      title={intl.formatMessage({ id: 'MAT.Table.Filters' })}
-      collapsed={false}
-    >
+    <DetailsBox title={intl.formatMessage({ id: 'MAT.Table.Filters' })}>
       <div className="flex flex-col">
         <div className="flex mb-4 items-center">
           <button
diff --git a/components/aggregation/mat/Help.js b/components/aggregation/mat/Help.js
index e36a842c..d477260d 100644
--- a/components/aggregation/mat/Help.js
+++ b/components/aggregation/mat/Help.js
@@ -15,7 +15,7 @@ const boxTitle = (
 
 const Help = () => {
   return (
-    <DetailsBox title={boxTitle} collapsed={false}>
+    <DetailsBox title={boxTitle}>
       <FormattedMarkdown id="MAT.Help.Content" />
       <div className="flex flex-col">
         {[...getCategoryCodesMap().values()].map(
diff --git a/components/country/ConfirmedBlockedCategory.js b/components/country/ConfirmedBlockedCategory.js
index 7c9b18f1..ed98566e 100644
--- a/components/country/ConfirmedBlockedCategory.js
+++ b/components/country/ConfirmedBlockedCategory.js
@@ -56,37 +56,32 @@ const ConfirmedBlockedCategory = () => {
           id: 'Country.Websites.ConfirmedBlockedCategories',
         })}
       </h3>
-      <>
-        {!blockedCategoriesData && !error ? (
-          <div> Loading ...</div>
-        ) : blockedCategoriesData === null ||
-          blockedCategoriesData.length === 0 ? (
-          <h5>
-            <FormattedMessage id="General.NoData" />
-          </h5>
-        ) : (
-          <div className="flex flex-wrap gap-2">
-            {blockedCategoriesData?.map((category) => (
-              <CategoryBadge
-                key={category.category_code}
-                categoryCode={category.category_code}
-              />
-            ))}
-          </div>
-        )}
-      </>
+      {!blockedCategoriesData && !error ? (
+        <div> Loading ...</div>
+      ) : blockedCategoriesData === null ||
+        blockedCategoriesData.length === 0 ? (
+        <h5>
+          <FormattedMessage id="General.NoData" />
+        </h5>
+      ) : (
+        <div className="flex flex-wrap gap-2">
+          {blockedCategoriesData?.map((category) => (
+            <CategoryBadge
+              key={category.category_code}
+              categoryCode={category.category_code}
+            />
+          ))}
+        </div>
+      )}
       {error && (
         <DetailsBox
-          collapsed={false}
           content={
-            <>
-              <details>
-                <summary>
-                  <span>Error: {error.message}</span>
-                </summary>
-                <pre>{JSON.stringify(error, null, 2)}</pre>
-              </details>
-            </>
+            <details>
+              <summary>
+                <span>Error: {error.message}</span>
+              </summary>
+              <pre>{JSON.stringify(error, null, 2)}</pre>
+            </details>
           }
         />
       )}
diff --git a/components/dashboard/Charts.js b/components/dashboard/Charts.js
index 8d60b297..c0ce2ec0 100644
--- a/components/dashboard/Charts.js
+++ b/components/dashboard/Charts.js
@@ -125,19 +125,15 @@ const Chart = memo(function Chart({ testName }) {
       </div>
       {error && (
         <DetailsBox
-          collapsed={false}
           content={
-            <>
-              <details>
-                <summary>
-                  <span>
-                    {intl.formatMessage({ id: 'General.Error' })}:{' '}
-                    {error.message}
-                  </span>
-                </summary>
-                <pre>{JSON.stringify(error, null, 2)}</pre>
-              </details>
-            </>
+            <details>
+              <summary>
+                <span>
+                  {intl.formatMessage({ id: 'General.Error' })}: {error.message}
+                </span>
+              </summary>
+              <pre>{JSON.stringify(error, null, 2)}</pre>
+            </details>
           }
         />
       )}
diff --git a/components/measurement/CommonDetails.js b/components/measurement/CommonDetails.js
index 52fb7916..4e6cd7d4 100644
--- a/components/measurement/CommonDetails.js
+++ b/components/measurement/CommonDetails.js
@@ -48,7 +48,7 @@ const CommonDetails = ({
   const { query } = useRouter()
   const queryString = new URLSearchParams(query)
   const rawMsmtDownloadURL = `${process.env.NEXT_PUBLIC_OONI_API}/api/v1/raw_measurement?${queryString}`
-  const [collapsed, setCollapsed] = useState(1)
+  const [collapsed, setCollapsed] = useState(query?.webview ? 50 : 1)
 
   const intl = useIntl()
   const unavailable = intl.formatMessage({
@@ -165,7 +165,6 @@ const CommonDetails = ({
       {/* Raw Measurement */}
       <div className="flex">
         <DetailsBox
-          collapsed={false}
           title={
             <div className="flex flex-1 px-4 justify-between flex-col md:flex-row items-center bg-gray-200">
               <div>
@@ -173,34 +172,36 @@ const CommonDetails = ({
                   id: 'Measurement.CommonDetails.RawMeasurement.Heading',
                 })}
               </div>
-              <div className="flex">
-                <a
-                  className="text-blue-700"
-                  href={rawMsmtDownloadURL}
-                  download={downloadFilename}
-                >
+              {!query.webview && (
+                <div className="flex">
+                  <a
+                    className="text-blue-700"
+                    href={rawMsmtDownloadURL}
+                    download={downloadFilename}
+                  >
+                    <button
+                      type="button"
+                      className="btn btn-primary px-8 mx-4 text-sm"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {intl.formatMessage({
+                        id: 'Measurement.CommonDetails.RawMeasurement.Download',
+                      })}
+                    </button>
+                  </a>
                   <button
                     type="button"
                     className="btn btn-primary px-8 mx-4 text-sm"
-                    onClick={(e) => e.stopPropagation()}
+                    onClick={(e) => {
+                      expandAllBtn(e)
+                    }}
                   >
                     {intl.formatMessage({
-                      id: 'Measurement.CommonDetails.RawMeasurement.Download',
+                      id: 'Measurement.CommonDetails.RawMeasurement.Expand',
                     })}
                   </button>
-                </a>
-                <button
-                  type="button"
-                  className="btn btn-primary px-8 mx-4 text-sm"
-                  onClick={(e) => {
-                    expandAllBtn(e)
-                  }}
-                >
-                  {intl.formatMessage({
-                    id: 'Measurement.CommonDetails.RawMeasurement.Expand',
-                  })}
-                </button>
-              </div>
+                </div>
+              )}
             </div>
           }
           content={
diff --git a/components/measurement/CommonSummary.js b/components/measurement/CommonSummary.js
index 21fc9b99..eedaddf4 100644
--- a/components/measurement/CommonSummary.js
+++ b/components/measurement/CommonSummary.js
@@ -1,7 +1,9 @@
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
 import { MdOutlineFactCheck } from 'react-icons/md'
 import { useIntl } from 'react-intl'
+import ConditionalWrapper from '../ConditionalWrapper'
 import Flag from '../Flag'
 
 const CommonSummary = ({
@@ -14,6 +16,9 @@ const CommonSummary = ({
   hero,
   onVerifyClick,
 }) => {
+  const {
+    query: { webview },
+  } = useRouter()
   const intl = useIntl()
   const startTime = measurement_start_time
   const network = probe_asn
@@ -32,27 +37,36 @@ const CommonSummary = ({
     >
       <div className="container">
         <div className="flex justify-between">
-          <div className="text-base">{formattedDate}</div>
-          <div
-            className="flex flex-col items-center cursor-pointer"
-            onClick={onVerifyClick}
-          >
-            <div className="text-lg text-center">
-              <MdOutlineFactCheck />
-            </div>
-            <div className="text-xs font-bold text-center">
-              {intl
-                .formatMessage({ id: 'Measurement.CommonSummary.Verify' })
-                .toUpperCase()}
+          <div className="text-base w-1/2">{formattedDate}</div>
+          {!webview && (
+            <div
+              className="flex flex-col items-center cursor-pointer"
+              onClick={onVerifyClick}
+            >
+              <div className="text-lg text-center">
+                <MdOutlineFactCheck />
+              </div>
+              <div className="text-xs font-bold text-center">
+                {intl
+                  .formatMessage({ id: 'Measurement.CommonSummary.Verify' })
+                  .toUpperCase()}
+              </div>
             </div>
-          </div>
+          )}
         </div>
         {hero}
-        <div className="flex mt-2 underline">
+        <div className="flex mt-2">
           <div className="lg:w-1/2">
-            <Link
-              className="text-white hover:text-white block"
-              href={`/country/${countryCode}`}
+            <ConditionalWrapper
+              condition={!webview}
+              wrapper={(children) => (
+                <Link
+                  className="text-white hover:text-white block underline"
+                  href={`/country/${countryCode}`}
+                >
+                  {children}
+                </Link>
+              )}
             >
               <div className="flex items-center text-xl">
                 <div className="mr-2">
@@ -60,13 +74,22 @@ const CommonSummary = ({
                 </div>
                 {country}
               </div>
-            </Link>
-            <Link
-              className="text-base my-2 text-white hover:text-white block"
-              href={`/as/${network}`}
+            </ConditionalWrapper>
+            <ConditionalWrapper
+              condition={!webview}
+              wrapper={(children) => (
+                <Link
+                  className="text-white hover:text-white block underline"
+                  href={`/as/${network}`}
+                >
+                  {children}
+                </Link>
+              )}
             >
-              {network} {networkName}
-            </Link>
+              <div className="my-2 text-base">
+                {network} {networkName}
+              </div>
+            </ConditionalWrapper>
           </div>
         </div>
       </div>
diff --git a/components/measurement/DetailsBox.js b/components/measurement/DetailsBox.js
index 4bc2ec27..fcce7895 100644
--- a/components/measurement/DetailsBox.js
+++ b/components/measurement/DetailsBox.js
@@ -1,3 +1,4 @@
+import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
 import { useCallback, useState } from 'react'
 import { MdExpandLess } from 'react-icons/md'
@@ -35,29 +36,38 @@ export const DetailsBox = ({
   className,
   ...rest
 }) => {
+  const {
+    query: { webview },
+  } = useRouter()
+
   const [isOpen, setIsOpen] = useState(!collapsed)
 
   const onToggle = useCallback(() => {
     setIsOpen(!isOpen)
-  }, [isOpen, setIsOpen])
+  }, [isOpen])
 
   return (
     <div
       className={twMerge('border-2 border-gray-200 w-full mb-4', className)}
       {...rest}
     >
-      {title && (
-        <div
-          className="flex justify-between font-bold text-lg cursor-pointer px-4 py-2 bg-gray-200 items-center"
-          onClick={onToggle}
-        >
-          {title}
-          <MdExpandLess
-            className={`cursor-pointer bg-white rounded-[50%] transition-transform ${isOpen ? 'rotate-0' : 'rotate-180'}`}
-            size={36}
-          />
-        </div>
-      )}
+      {title &&
+        (webview ? (
+          <div className="flex justify-between font-bold text-lg cursor-pointer px-4 py-2 bg-gray-200 items-center">
+            {title}
+          </div>
+        ) : (
+          <div
+            className="flex justify-between font-bold text-lg cursor-pointer px-4 py-2 bg-gray-200 items-center"
+            onClick={onToggle}
+          >
+            {title}
+            <MdExpandLess
+              className={`cursor-pointer bg-white rounded-[50%] transition-transform ${isOpen ? 'rotate-0' : 'rotate-180'}`}
+              size={36}
+            />
+          </div>
+        ))}
       {isOpen && (
         <div className="p-4 flex-wrap overflow-x-auto">
           {content || children}
diff --git a/components/measurement/StatusInfo.js b/components/measurement/StatusInfo.js
index 05e83c07..3f8cf7ee 100644
--- a/components/measurement/StatusInfo.js
+++ b/components/measurement/StatusInfo.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 
 const StatusInfo = ({ title, message }) => (
   <div className="flex flex-col">
-    <div className="text-center text-3xl mb-3"> {title} </div>
+    <div className="text-center text-3xl mb-3 break-words"> {title} </div>
     <div className="text-center text-lg font-bold whitespace-pre">
       {' '}
       {message}{' '}
diff --git a/components/measurement/nettests/Telegram.js b/components/measurement/nettests/Telegram.js
index 10d1281d..72250801 100644
--- a/components/measurement/nettests/Telegram.js
+++ b/components/measurement/nettests/Telegram.js
@@ -88,7 +88,6 @@ const TelegramDetails = ({ measurement, render }) => {
             title={
               <FormattedMessage id="Measurement.Details.Telegram.Endpoint.Status.Heading" />
             }
-            collapsed={false}
           >
             {tcp_connect.map((connection, index) => (
               <div className="flex" key={index}>
diff --git a/components/measurement/nettests/WebConnectivity.js b/components/measurement/nettests/WebConnectivity.js
index 02a4ed69..67d61d61 100644
--- a/components/measurement/nettests/WebConnectivity.js
+++ b/components/measurement/nettests/WebConnectivity.js
@@ -1,13 +1,14 @@
 import bufferFrom from 'buffer-from'
 import deepmerge from 'deepmerge'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { Cross, Tick } from 'ooni-components/icons'
 import PropTypes from 'prop-types'
-import url from 'url'
-
+import { Fragment } from 'react'
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl'
+import url from 'url'
 
-import { Fragment } from 'react'
+import ConditionalWrapper from '../../ConditionalWrapper'
 import { DetailsBox } from '../DetailsBox'
 import StatusInfo from '../StatusInfo'
 
@@ -286,6 +287,22 @@ const StyledLink = ({ children, href }) => (
   </Link>
 )
 
+const UrlWrapper = ({ href }) => {
+  const {
+    query: { webview },
+  } = useRouter()
+  return (
+    <ConditionalWrapper
+      condition={!webview}
+      wrapper={(children) => (
+        <StyledLink href={getSearchHref(href)}>{children}</StyledLink>
+      )}
+    >
+      {href}
+    </ConditionalWrapper>
+  )
+}
+
 const WebConnectivityDetails = ({
   isConfirmed,
   isAnomaly,
@@ -312,6 +329,10 @@ const WebConnectivityDetails = ({
     },
   } = validateMeasurement(measurement ?? {})
 
+  const {
+    query: { webview },
+  } = useRouter()
+
   const intl = useIntl()
   const date = new Intl.DateTimeFormat(intl.locale, {
     dateStyle: 'long',
@@ -336,7 +357,8 @@ const WebConnectivityDetails = ({
         values={{
           date,
           WebsiteURL: (
-            <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
+            <UrlWrapper href={input} />
+            // <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
           ),
           network: probe_asn,
           country,
@@ -351,7 +373,8 @@ const WebConnectivityDetails = ({
         values={{
           date,
           WebsiteURL: (
-            <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
+            <UrlWrapper href={input} />
+            // <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
           ),
           network: probe_asn,
           country,
@@ -381,7 +404,8 @@ const WebConnectivityDetails = ({
         values={{
           date,
           WebsiteURL: (
-            <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
+            <UrlWrapper href={input} />
+            // <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
           ),
           'link-to-docs': (string) => (
             <a href="https://ooni.org/support/faq/#why-do-false-positives-occur">
@@ -414,7 +438,8 @@ const WebConnectivityDetails = ({
         values={{
           date,
           WebsiteURL: (
-            <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
+            <UrlWrapper href={input} />
+            // <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
           ),
           network: probe_asn,
           country,
@@ -441,7 +466,8 @@ const WebConnectivityDetails = ({
         values={{
           date,
           WebsiteURL: (
-            <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
+            <UrlWrapper href={input} />
+            // <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
           ),
           network: probe_asn,
           country,
@@ -469,7 +495,8 @@ const WebConnectivityDetails = ({
         values={{
           date,
           WebsiteURL: (
-            <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
+            <UrlWrapper href={input} />
+            // <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
           ),
           network: probe_asn,
           country,
@@ -505,12 +532,19 @@ const WebConnectivityDetails = ({
         statusInfo: (
           <StatusInfo
             title={
-              <Link
-                className="text-white underline hover:text-white"
-                href={`/domain/${hostname}`}
+              <ConditionalWrapper
+                condition={!webview}
+                wrapper={(children) => (
+                  <Link
+                    className="text-white underline hover:text-white"
+                    href={`/domain/${hostname}`}
+                  >
+                    {children}
+                  </Link>
+                )}
               >
                 {input}
-              </Link>
+              </ConditionalWrapper>
             }
             message={reason}
           />
diff --git a/pages/m/[measurement_uid].js b/pages/m/[measurement_uid].js
index 9d78b060..be87d3fa 100644
--- a/pages/m/[measurement_uid].js
+++ b/pages/m/[measurement_uid].js
@@ -1,10 +1,11 @@
 import axios from 'axios'
 import Head from 'next/head'
+import { useRouter } from 'next/router'
 import { colors } from 'ooni-components'
 import PropTypes from 'prop-types'
 import { useMemo, useState } from 'react'
+import { useIntl } from 'react-intl'
 import useSWR from 'swr'
-import { getLocalisedRegionName } from '/utils/i18nCountries'
 
 import CommonDetails from 'components/measurement/CommonDetails'
 import CommonSummary from 'components/measurement/CommonSummary'
@@ -14,12 +15,11 @@ import HeadMetadata from 'components/measurement/HeadMetadata'
 import Hero from 'components/measurement/Hero'
 import MeasurementContainer from 'components/measurement/MeasurementContainer'
 import SummaryText from 'components/measurement/SummaryText'
-
 import useUser from 'hooks/useUser'
 import ErrorPage from 'pages/_error'
-import { useIntl } from 'react-intl'
 import NotFound from '../../components/NotFound'
 import { fetcher } from '/lib/api'
+import { getLocalisedRegionName } from '/utils/i18nCountries'
 
 const pageColors = {
   default: colors.blue['500'],
@@ -138,7 +138,7 @@ const Measurement = ({
           value,
         }))
       : []
-  }, [userFeedback])
+  }, [userFeedback, intl])
 
   // Add the 'AS' prefix to probe_asn when API chooses to send just the number
   probe_asn = typeof probe_asn === 'number' ? `AS${probe_asn}` : probe_asn
@@ -181,6 +181,10 @@ const Measurement = ({
               headMetadata,
               details,
             }) => {
+              const {
+                query: { webview },
+              } = useRouter()
+
               const color =
                 failure === true ? pageColors.error : pageColors[status]
               const info = scores?.msg ?? statusInfo
@@ -222,12 +226,14 @@ const Measurement = ({
                     onVerifyClick={() => setShowModal(true)}
                   />
                   <div className="container">
-                    <DetailsHeader
-                      testName={test_name}
-                      runtime={raw_measurement?.test_runtime}
-                      notice={legacy}
-                      url={`measurement/${measurement_uid}`}
-                    />
+                    {!webview && (
+                      <DetailsHeader
+                        testName={test_name}
+                        runtime={raw_measurement?.test_runtime}
+                        notice={legacy}
+                        url={`measurement/${measurement_uid}`}
+                      />
+                    )}
                     {summaryText && (
                       <SummaryText
                         testName={test_name}