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..b99bfa93
--- /dev/null
+++ b/components/ConditionalWrapper.js
@@ -0,0 +1,4 @@
+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..39eac94a 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -4,11 +4,12 @@ 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 Layout = ({ children, isEmbeddedView }) => {
   const { pathname } = useRouter()
 
   const navbarColor = useMemo(() => {
@@ -31,23 +32,28 @@ const Layout = ({ children }) => {
 
   return (
     <UserProvider>
-      <div className="site text-sm flex flex-col min-h-[100vh]">
+      <div className="site flex flex-col min-h-[100vh]">
         <div className="flex-[1_0_auto]">
           <Header />
-          {navbarSticky ? (
-            <StyledStickyNavBar>
+          {!isEmbeddedView && (
+            <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>
+        {!isEmbeddedView && (
+          <div className="flex-shrink-0">
+            <Footer />
+          </div>
+        )}
       </div>
     </UserProvider>
   )
diff --git a/components/NavBar.js b/components/NavBar.js
index a459e0f8..20cda3fb 100644
--- a/components/NavBar.js
+++ b/components/NavBar.js
@@ -182,7 +182,7 @@ export const NavBar = ({ color }) => {
                   </div>
                 )}
                 <div
-                  className={`flex gap-4 lg:gap-8 ${showMenu && 'pt-2 flex-col items-start [&>a]:border-black [&>a]:hover:border-black [&>*]:opacity-100 [&>*]:text-black [&>*]:hover:text-black'}`}
+                  className={`flex gap-4 lg:gap-8 text-sm ${showMenu && 'pt-2 flex-col items-start [&>a]:border-black [&>a]:hover:border-black [&>*]:opacity-100 [&>*]:text-black [&>*]:hover:text-black'}`}
                 >
                   <NavItem
                     label={<FormattedMessage id="Navbar.Findings" />}
diff --git a/components/SocialButtons.js b/components/SocialButtons.js
index d3306373..566c25dc 100644
--- a/components/SocialButtons.js
+++ b/components/SocialButtons.js
@@ -6,9 +6,9 @@ const SocialButtons = ({ url }) => {
   const intl = useIntl()
 
   return (
-    <div className="flex px-2 items-center">
+    <div className="flex gap-2 items-center">
       <MdShare height="20px" width="20px" />
-      <div className="pl-2 text-right">
+      <div>
         {intl.formatMessage(
           { id: 'SocialButtons.CTA' },
           {
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..a4ab2da6 100644
--- a/components/measurement/CommonDetails.js
+++ b/components/measurement/CommonDetails.js
@@ -1,10 +1,10 @@
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
-import { colors } from 'ooni-components'
 import PropTypes from 'prop-types'
-import { useState } from 'react'
+import { useContext, useState } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 
+import { EmbeddedViewContext } from '../../pages/m/[measurement_uid]'
 import { DetailsBox, DetailsBoxTable } from './DetailsBox'
 
 const LoadingRawData = () => {
@@ -21,7 +21,7 @@ const ReactJson = dynamic(() => import('react-json-view'), {
 })
 
 const JsonViewer = ({ src, collapsed }) => (
-  <div className="[&_.string-value]:overflow-ellipsis [&_.string-value]:max-w-[800px] [&_.string-value]:overflow-hidden [&_.string-value]:inline-block">
+  <div className="text-xs md:text-sm [&_.string-value]:overflow-ellipsis [&_.string-value]:max-w-[800px] [&_.string-value]:overflow-hidden [&_.string-value]:inline-block">
     <ReactJson collapsed={collapsed} src={src} name={null} indentWidth={2} />
   </div>
 )
@@ -45,6 +45,8 @@ const CommonDetails = ({
     resolver_network_name,
   } = measurement ?? {}
 
+  const isEmbeddedView = useContext(EmbeddedViewContext)
+
   const { query } = useRouter()
   const queryString = new URLSearchParams(query)
   const rawMsmtDownloadURL = `${process.env.NEXT_PUBLIC_OONI_API}/api/v1/raw_measurement?${queryString}`
@@ -137,42 +139,35 @@ const CommonDetails = ({
   return (
     <>
       {showResolverItems && (
-        <div className="flex my-8">
-          {/* Resolver data */}
-          <DetailsBoxTable
-            title={
-              <FormattedMessage id="Measurement.CommonDetails.Label.Resolver" />
-            }
-            items={resolverItems}
-          />
-        </div>
+        // Resolver data
+        <DetailsBoxTable
+          title={
+            <FormattedMessage id="Measurement.CommonDetails.Label.Resolver" />
+          }
+          items={resolverItems}
+        />
       )}
-      <div className="flex my-8">
-        {/* Metadata: platform, probe, MK version etc. */}
-        <DetailsBoxTable items={items} className="bg-gray-200" />
-      </div>
+      {/* Metadata: platform, probe, MK version etc. */}
+      <DetailsBoxTable items={items} className="bg-gray-200" />
       {/* User Feedback */}
       {!!userFeedbackItems.length && (
-        <div className="flex my-8">
-          <DetailsBoxTable
-            title={
-              <FormattedMessage id="Measurement.CommonDetails.Label.UserFeedback" />
-            }
-            items={userFeedbackItems}
-          />
-        </div>
+        <DetailsBoxTable
+          title={
+            <FormattedMessage id="Measurement.CommonDetails.Label.UserFeedback" />
+          }
+          items={userFeedbackItems}
+        />
       )}
       {/* 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>
-                {intl.formatMessage({
-                  id: 'Measurement.CommonDetails.RawMeasurement.Heading',
-                })}
-              </div>
+      <DetailsBox
+        title={
+          <div className="flex flex-1 justify-between flex-col md:flex-row items-center bg-gray-200">
+            <div className="self-start">
+              {intl.formatMessage({
+                id: 'Measurement.CommonDetails.RawMeasurement.Heading',
+              })}
+            </div>
+            {!isEmbeddedView && (
               <div className="flex">
                 <a
                   className="text-blue-700"
@@ -201,19 +196,19 @@ const CommonDetails = ({
                   })}
                 </button>
               </div>
+            )}
+          </div>
+        }
+        content={
+          measurement && typeof measurement === 'object' ? (
+            <div className="flex bg-white" style={{ direction: 'ltr' }}>
+              <JsonViewer src={measurement} collapsed={collapsed} />
             </div>
-          }
-          content={
-            measurement && typeof measurement === 'object' ? (
-              <div className="flex bg-white p-4" style={{ direction: 'ltr' }}>
-                <JsonViewer src={measurement} collapsed={collapsed} />
-              </div>
-            ) : (
-              <FormattedMessage id="Measurement.CommonDetails.RawMeasurement.Unavailable" />
-            )
-          }
-        />
-      </div>
+          ) : (
+            <FormattedMessage id="Measurement.CommonDetails.RawMeasurement.Unavailable" />
+          )
+        }
+      />
     </>
   )
 }
diff --git a/components/measurement/CommonSummary.js b/components/measurement/CommonSummary.js
index 21fc9b99..a11cdc21 100644
--- a/components/measurement/CommonSummary.js
+++ b/components/measurement/CommonSummary.js
@@ -1,7 +1,10 @@
 import Link from 'next/link'
 import PropTypes from 'prop-types'
+import { useContext } from 'react'
 import { MdOutlineFactCheck } from 'react-icons/md'
 import { useIntl } from 'react-intl'
+import { EmbeddedViewContext } from '../../pages/m/[measurement_uid]'
+import ConditionalWrapper from '../ConditionalWrapper'
 import Flag from '../Flag'
 
 const CommonSummary = ({
@@ -14,6 +17,7 @@ const CommonSummary = ({
   hero,
   onVerifyClick,
 }) => {
+  const isEmbeddedView = useContext(EmbeddedViewContext)
   const intl = useIntl()
   const startTime = measurement_start_time
   const network = probe_asn
@@ -32,27 +36,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>
+          {!isEmbeddedView && (
+            <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={!isEmbeddedView}
+              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 +73,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={!isEmbeddedView}
+              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..91196401 100644
--- a/components/measurement/DetailsBox.js
+++ b/components/measurement/DetailsBox.js
@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types'
-import { useCallback, useState } from 'react'
+import { useCallback, useContext, useState } from 'react'
 import { MdExpandLess } from 'react-icons/md'
 import { twMerge } from 'tailwind-merge'
+import { EmbeddedViewContext } from '../../pages/m/[measurement_uid]'
 
 export const DetailsBoxTable = ({ title, items, className }) => (
   <DetailsBox
@@ -9,7 +10,7 @@ export const DetailsBoxTable = ({ title, items, className }) => (
     className={className}
     content={items.map((item, index) => (
       <div className="flex flex-wrap" key={index}>
-        <div className="md:w-1/4 font-bold">{item.label}</div>
+        <div className="md:w-1/4 font-bold pe-4">{item.label}</div>
         <div className="md:w-3/4 break-words">{item.value}</div>
       </div>
     ))}
@@ -39,11 +40,11 @@ export const DetailsBox = ({
 
   const onToggle = useCallback(() => {
     setIsOpen(!isOpen)
-  }, [isOpen, setIsOpen])
+  }, [isOpen])
 
   return (
     <div
-      className={twMerge('border-2 border-gray-200 w-full mb-4', className)}
+      className={twMerge('border-2 border-gray-200 w-full my-8', className)}
       {...rest}
     >
       {title && (
@@ -59,7 +60,7 @@ export const DetailsBox = ({
         </div>
       )}
       {isOpen && (
-        <div className="p-4 flex-wrap overflow-x-auto">
+        <div className="p-4 flex-wrap overflow-x-auto text-sm">
           {content || children}
         </div>
       )}
diff --git a/components/measurement/DetailsHeader.js b/components/measurement/DetailsHeader.js
index fd06a89d..7b54094f 100644
--- a/components/measurement/DetailsHeader.js
+++ b/components/measurement/DetailsHeader.js
@@ -4,41 +4,48 @@ import { MdOpenInNew } from 'react-icons/md'
 import { FormattedMessage } from 'react-intl'
 import { getTestMetadata } from '../utils'
 
+import { useContext } from 'react'
+import { EmbeddedViewContext } from '../../pages/m/[measurement_uid]'
 import TestGroupBadge from '../Badge'
 import SocialButtons from '../SocialButtons'
 
 const DetailsHeader = ({ testName, runtime, notice, url }) => {
   const metadata = getTestMetadata(testName)
+  const isEmbeddedView = useContext(EmbeddedViewContext)
 
   return (
     <>
-      <div className="flex pt-8 pb-2 items-end md:items-center flex-col md:flex-row">
-        <div className="flex mb-4 md:mb-0 items-center">
+      {!isEmbeddedView && (
+        <div className="flex my-4 justify-end">
+          <SocialButtons url={url} />
+        </div>
+      )}
+      <div className="flex mb-8 mt-4 gap-1 flex-col md:flex-row">
+        <div className="flex items-center">
           <TestGroupBadge testName={testName} />
-          <div className="ml-2">
-            <a
-              className="text-blue-700 text-xl flex items-center"
-              href={metadata.info}
-            >
-              {metadata.name}
-              &nbsp;
-              <small>
-                <MdOpenInNew />
-              </small>
-            </a>
-          </div>
+          {!isEmbeddedView && (
+            <div className="ml-2">
+              <a
+                className="text-blue-700 md:text-xl flex items-center"
+                href={metadata.info}
+              >
+                {metadata.name}
+                &nbsp;
+                <small>
+                  <MdOpenInNew />
+                </small>
+              </a>
+            </div>
+          )}
         </div>
         <div className="mx-auto">{notice}</div>
         {runtime && (
-          <div className="text-xl">
+          <div className="md:text-xl">
             <FormattedMessage id="Measurement.DetailsHeader.Runtime" />:{' '}
             <span className="font-bold">{prettyMs(runtime * 1000)}</span>
           </div>
         )}
       </div>
-      <div className="flex pb-8 pt-2 items-start md:items-end">
-        <SocialButtons url={url} />
-      </div>
     </>
   )
 }
diff --git a/components/measurement/Hero.js b/components/measurement/Hero.js
index 172bd431..629d8dcc 100644
--- a/components/measurement/Hero.js
+++ b/components/measurement/Hero.js
@@ -40,7 +40,7 @@ const Hero = ({ status, icon, label, info }) => {
   }
 
   return (
-    <div className="text-white my-7">
+    <div className="text-white my-8">
       <div className="font-normal text-2xl">
         <div className="flex my-2 justify-center items-center">
           {icon} <div>{label}</div>
diff --git a/components/measurement/StatusInfo.js b/components/measurement/StatusInfo.js
index 05e83c07..2553377b 100644
--- a/components/measurement/StatusInfo.js
+++ b/components/measurement/StatusInfo.js
@@ -2,11 +2,16 @@ 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-lg font-bold whitespace-pre">
+    <div className="text-center text-2xl md:text-3xl break-words">
       {' '}
-      {message}{' '}
+      {title}{' '}
     </div>
+    {message && (
+      <div className="text-center text-lg font-bold mt-3 whitespace-pre">
+        {' '}
+        {message}{' '}
+      </div>
+    )}
   </div>
 )
 
diff --git a/components/measurement/SummaryText.js b/components/measurement/SummaryText.js
index 1283fd1b..2f52215f 100644
--- a/components/measurement/SummaryText.js
+++ b/components/measurement/SummaryText.js
@@ -1,38 +1,53 @@
+import Markdown from 'markdown-to-jsx'
 import PropTypes from 'prop-types'
+import { useContext } from 'react'
 import { useIntl } from 'react-intl'
 import dayjs from 'services/dayjs'
+import { EmbeddedViewContext } from '../../pages/m/[measurement_uid]'
 import FormattedMarkdown from '../FormattedMarkdown'
 import { getTestMetadata } from '../utils'
 
 const SummaryText = ({ testName, network, country, date, content }) => {
-  const { locale } = useIntl()
+  const { locale, formatMessage } = useIntl()
   const metadata = getTestMetadata(testName)
   const formattedDateTime = dayjs(date)
     .locale(locale)
     .utc()
     .format('MMMM DD, YYYY, hh:mm A [UTC]')
+  const isEmbeddedView = useContext(EmbeddedViewContext)
 
   let textToRender = null
   if (typeof content === 'function') {
     textToRender = content()
   } else if (typeof content === 'string') {
-    textToRender = (
-      <FormattedMarkdown
-        id={content}
-        values={{
-          testName: `[${metadata.name}](${metadata.info})`,
-          network,
-          country,
-          date: formattedDateTime,
+    const values = {
+      testName: `[${metadata.name}](${metadata.info})`,
+      network,
+      country,
+      date: formattedDateTime,
+    }
+    textToRender = isEmbeddedView ? (
+      <Markdown
+        options={{
+          overrides: {
+            a: { component: ({ children }) => <>{children}</> },
+          },
         }}
-      />
+      >
+        {formatMessage({ id: content }, values)}
+      </Markdown>
+    ) : (
+      <FormattedMarkdown id={content} values={values} />
     )
   } else {
     textToRender = content
   }
   return (
-    <div className="flex">
-      <div className="py-8 text-xl">{textToRender}</div>
+    <div
+      className="my-8 text-base md:text-xl"
+      style={{ overflowWrap: 'anywhere' }}
+    >
+      {textToRender}
     </div>
   )
 }
diff --git a/components/measurement/nettests/FacebookMessenger.js b/components/measurement/nettests/FacebookMessenger.js
index d3041ee9..ffc19d57 100644
--- a/components/measurement/nettests/FacebookMessenger.js
+++ b/components/measurement/nettests/FacebookMessenger.js
@@ -25,7 +25,7 @@ export const FacebookMessengerDetails = ({ measurement, render }) => {
     },
   })
 
-  let summaryText = ''
+  let summaryText = ' '
   let statusMessage = []
 
   if (!isWorking) {
@@ -44,7 +44,7 @@ export const FacebookMessengerDetails = ({ measurement, render }) => {
       })
     }
 
-    summaryText += ''
+    summaryText += ' '
 
     if (dnsBlocking) {
       summaryText += intl.formatMessage({
@@ -84,23 +84,19 @@ export const FacebookMessengerDetails = ({ measurement, render }) => {
     },
     details: (
       <>
-        <div className="flex mb-8">
-          <div className="w-1/4">
-            <AccessPointStatus
-              label={
-                <FormattedMessage id="Measurement.Details.FacebookMessenger.DNS.Label.Title" />
-              }
-              ok={!dnsBlocking}
-            />
-          </div>
-          <div className="w-1/4">
-            <AccessPointStatus
-              label={
-                <FormattedMessage id="Measurement.Details.FacebookMessenger.TCP.Label.Title" />
-              }
-              ok={!tcpBlocking}
-            />
-          </div>
+        <div className="flex gap-8 mb-8">
+          <AccessPointStatus
+            label={
+              <FormattedMessage id="Measurement.Details.FacebookMessenger.DNS.Label.Title" />
+            }
+            ok={!dnsBlocking}
+          />
+          <AccessPointStatus
+            label={
+              <FormattedMessage id="Measurement.Details.FacebookMessenger.TCP.Label.Title" />
+            }
+            ok={!tcpBlocking}
+          />
         </div>
         <DetailsBox
           title={
diff --git a/components/measurement/nettests/Ndt.js b/components/measurement/nettests/Ndt.js
index 7839d350..0dcc0da3 100644
--- a/components/measurement/nettests/Ndt.js
+++ b/components/measurement/nettests/Ndt.js
@@ -141,7 +141,7 @@ const NdtDetails = ({ measurement, render }) => {
         )}
       </div>
     ),
-    details: <div>{!isFailed && performanceDetails}</div>,
+    details: <>{!isFailed && performanceDetails}</>,
   })
 }
 
diff --git a/components/measurement/nettests/Psiphon.js b/components/measurement/nettests/Psiphon.js
index fe9aadb7..ec2566f1 100644
--- a/components/measurement/nettests/Psiphon.js
+++ b/components/measurement/nettests/Psiphon.js
@@ -59,20 +59,18 @@ const PsiphonDetails = ({ measurement, render }) => {
           formatted: false,
         },
         details: (
-          <div className="container">
-            <div className="flex">
-              {bootstrap_time && (
-                <AccessPointStatus
-                  icon={<MdTimer />}
-                  label={
-                    <FormattedMessage id="Measurement.Details.Psiphon.BootstrapTime.Label" />
-                  }
-                  content={Number(bootstrap_time).toFixed(2)}
-                  ok={true}
-                />
-              )}
-            </div>
-          </div>
+          <>
+            {bootstrap_time && (
+              <AccessPointStatus
+                icon={<MdTimer />}
+                label={
+                  <FormattedMessage id="Measurement.Details.Psiphon.BootstrapTime.Label" />
+                }
+                content={Number(bootstrap_time).toFixed(2)}
+                ok={true}
+              />
+            )}
+          </>
         ),
       })}
     </>
diff --git a/components/measurement/nettests/Telegram.js b/components/measurement/nettests/Telegram.js
index 10d1281d..ec56df0f 100644
--- a/components/measurement/nettests/Telegram.js
+++ b/components/measurement/nettests/Telegram.js
@@ -63,32 +63,27 @@ const TelegramDetails = ({ measurement, render }) => {
     },
     details: (
       <>
-        <div className="flex mb-8">
-          <div className="w-1/4">
-            <AccessPointStatus
-              icon={<MdPhoneAndroid />}
-              label={
-                <FormattedMessage id="Measurement.Details.Telegram.Endpoint.Label.Mobile" />
-              }
-              ok={telegramDesktopOK}
-            />
-          </div>
-          <div className="w-1/4">
-            <AccessPointStatus
-              icon={<MdWebAsset />}
-              label={
-                <FormattedMessage id="Measurement.Details.Telegram.Endpoint.Label.Web" />
-              }
-              ok={telegramWebOK}
-            />
-          </div>
+        <div className="flex gap-8 mb-8">
+          <AccessPointStatus
+            icon={<MdPhoneAndroid />}
+            label={
+              <FormattedMessage id="Measurement.Details.Telegram.Endpoint.Label.Mobile" />
+            }
+            ok={telegramDesktopOK}
+          />
+          <AccessPointStatus
+            icon={<MdWebAsset />}
+            label={
+              <FormattedMessage id="Measurement.Details.Telegram.Endpoint.Label.Web" />
+            }
+            ok={telegramWebOK}
+          />
         </div>
         {Array.isArray(tcp_connect) && tcp_connect.length > 0 && (
           <DetailsBox
             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/Tor.js b/components/measurement/nettests/Tor.js
index 54d6c34f..6df4b874 100644
--- a/components/measurement/nettests/Tor.js
+++ b/components/measurement/nettests/Tor.js
@@ -208,7 +208,7 @@ const TorDetails = ({ isAnomaly, isFailure, measurement, render }) => {
           <>
             {!!Object.keys(testKeys).length && (
               <>
-                <div className="flex my-8">
+                <div className="flex gap-8 my-8">
                   <AccessPointStatus
                     width={1 / 2}
                     label={
diff --git a/components/measurement/nettests/TorSnowflake.js b/components/measurement/nettests/TorSnowflake.js
index 47081c75..4cca1c22 100644
--- a/components/measurement/nettests/TorSnowflake.js
+++ b/components/measurement/nettests/TorSnowflake.js
@@ -61,29 +61,27 @@ const TorSnowflakeDetails = ({ isAnomaly, isFailure, measurement, render }) => {
           formatted: false,
         },
         details: (
-          <div className="container">
-            <div className="flex">
-              {isAnomaly && (
-                <AccessPointStatus
-                  label={
-                    <FormattedMessage id="Measurement.Details.TorSnowflake.Error.Label" />
-                  }
-                  content={failure}
-                  ok={true}
-                />
-              )}
-              {!isAnomaly && !isFailure && bootstrap_time !== null && (
-                <AccessPointStatus
-                  icon={<MdTimer />}
-                  label={
-                    <FormattedMessage id="Measurement.Details.TorSnowflake.BootstrapTime.Label" />
-                  }
-                  content={Number(bootstrap_time).toFixed(2)}
-                  ok={true}
-                />
-              )}
-            </div>
-          </div>
+          <>
+            {isAnomaly && (
+              <AccessPointStatus
+                label={
+                  <FormattedMessage id="Measurement.Details.TorSnowflake.Error.Label" />
+                }
+                content={failure}
+                ok={true}
+              />
+            )}
+            {!isAnomaly && !isFailure && bootstrap_time !== null && (
+              <AccessPointStatus
+                icon={<MdTimer />}
+                label={
+                  <FormattedMessage id="Measurement.Details.TorSnowflake.BootstrapTime.Label" />
+                }
+                content={Number(bootstrap_time).toFixed(2)}
+                ok={true}
+              />
+            )}
+          </>
         ),
       })}
     </>
diff --git a/components/measurement/nettests/WebConnectivity.js b/components/measurement/nettests/WebConnectivity.js
index 02a4ed69..04fad500 100644
--- a/components/measurement/nettests/WebConnectivity.js
+++ b/components/measurement/nettests/WebConnectivity.js
@@ -3,11 +3,12 @@ import deepmerge from 'deepmerge'
 import Link from 'next/link'
 import { Cross, Tick } from 'ooni-components/icons'
 import PropTypes from 'prop-types'
-import url from 'url'
-
+import { Fragment, useContext } from 'react'
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl'
+import url from 'url'
 
-import { Fragment } from 'react'
+import { EmbeddedViewContext } from '../../../pages/m/[measurement_uid]'
+import ConditionalWrapper from '../../ConditionalWrapper'
 import { DetailsBox } from '../DetailsBox'
 import StatusInfo from '../StatusInfo'
 
@@ -67,7 +68,7 @@ const RequestResponseContainer = ({ request }) => {
               <FormattedMessage id="Measurement.Details.Websites.HTTP.Request.URL" />
             </h5>
           </div>
-          <div className="w-full mb-2 p-4 bg-gray-200 text-sm">
+          <div className="w-full mb-2 p-4 bg-gray-200 text-sm overflow-auto">
             <pre>
               {request.request.method} {request.request.url}
             </pre>
@@ -78,7 +79,7 @@ const RequestResponseContainer = ({ request }) => {
               <FormattedMessage id="Measurement.Details.Websites.HTTP.Response.Headers" />
             </h5>
           </div>
-          <div className="w-full mb-2 p-4 bg-gray-200 text-sm">
+          <div className="w-full mb-2 p-4 bg-gray-200 text-sm overflow-auto">
             <pre className="whitespace-pre-wrap break-words text-sm">
               {request.response.headers ? (
                 Object.keys(request.response.headers).map((header, index) => (
@@ -129,7 +130,7 @@ const FailureString = ({ failure }) => {
   }
 
   return (
-    <div>
+    <div className="flex">
       <Cross size={20} /> {failure}
     </div>
   )
@@ -139,16 +140,6 @@ FailureString.propTypes = {
   failure: PropTypes.string,
 }
 
-const DnsNarrowAnswerCell = (props) => (
-  <div className="w-1/12">{props.children}</div>
-)
-
-const DnsAnswerCell = (props) => <div className="w-1/4">{props.children}</div>
-
-DnsAnswerCell.propTypes = {
-  children: PropTypes.any,
-}
-
 const dnsAnswerIpInfo = (dnsAnswer) => {
   const asn = dnsAnswer.asn ? `AS${dnsAnswer.asn}` : 'Unknown AS'
   const asOrgName = dnsAnswer.as_org_name ? `(${dnsAnswer.as_org_name})` : ''
@@ -156,35 +147,6 @@ const dnsAnswerIpInfo = (dnsAnswer) => {
   return `${asn} ${asOrgName}`.trim()
 }
 
-const DnsAnswerRow = ({
-  name = 'Name',
-  netClass = 'Class',
-  ttl = 'TTL',
-  type = 'Type',
-  data = 'DATA',
-  answer_ip_info = 'Answer IP Info',
-  header = false,
-}) => (
-  <div className={`flex flex-wrap mb-2 ${header && 'font-bold'}`}>
-    <DnsAnswerCell>{name}</DnsAnswerCell>
-    <DnsNarrowAnswerCell>{netClass}</DnsNarrowAnswerCell>
-    <DnsNarrowAnswerCell>{ttl}</DnsNarrowAnswerCell>
-    <DnsNarrowAnswerCell>{type}</DnsNarrowAnswerCell>
-    <DnsAnswerCell>{data}</DnsAnswerCell>
-    <DnsAnswerCell>{answer_ip_info}</DnsAnswerCell>
-  </div>
-)
-
-DnsAnswerRow.propTypes = {
-  name: PropTypes.string,
-  netClass: PropTypes.string,
-  ttl: PropTypes.number,
-  type: PropTypes.string,
-  data: PropTypes.string,
-  answer_ip_info: PropTypes.string,
-  header: PropTypes.bool,
-}
-
 const QueryContainer = ({ query }) => {
   const { query_type, answers, hostname, engine, failure } = query
   return (
@@ -212,29 +174,50 @@ const QueryContainer = ({ query }) => {
         </div>
       )}
       {!failure && (
-        <div className="w-full">
-          <DnsAnswerRow header />
-          {Array.isArray(answers) &&
-            answers.map((dnsAnswer, index) => (
-              <DnsAnswerRow
-                key={index}
-                name="@"
-                netClass="IN"
-                ttl={dnsAnswer.ttl}
-                type={dnsAnswer.answer_type}
-                data={
-                  dnsAnswer.answer_type === 'A'
-                    ? dnsAnswer.ipv4
-                    : dnsAnswer.answer_type === 'AAAA'
-                      ? dnsAnswer.ipv6
-                      : dnsAnswer.answer_type === 'CNAME'
-                        ? dnsAnswer.hostname
-                        : null // for any other answer_type, DATA column will be empty
-                }
-                answer_ip_info={dnsAnswerIpInfo(dnsAnswer)}
-              />
-            ))}
-        </div>
+        <table class="w-full flex flex-row flex-no-wrap sm:inline-table table-fixed">
+          <thead>
+            <tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
+              <th class="py-1 pe-1 text-left">Name</th>
+              <th class="py-1 pe-1 text-left">Class</th>
+              <th class="py-1 pe-1 text-left">TTL</th>
+              <th class="py-1 pe-1 text-left">Type</th>
+              <th class="py-1 pe-1 text-left">DATA</th>
+              <th class="py-1 pe-1 text-left">Answer IP Info</th>
+            </tr>
+          </thead>
+          <tbody class="flex-1 sm:flex-none">
+            {Array.isArray(answers) &&
+              answers.map((dnsAnswer, index) => (
+                <tr
+                  key={index}
+                  class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0"
+                >
+                  <td class="py-1 pe-1">@</td>
+                  <td class="py-1 pe-1">IN</td>
+                  <td class="py-1 pe-1">{dnsAnswer.ttl || <>&nbsp;</>}</td>
+                  <td class="py-1 pe-1">
+                    {dnsAnswer.answer_type || <>&nbsp;</>}
+                  </td>
+                  <td class="py-1 pe-1">
+                    {
+                      dnsAnswer.answer_type === 'A' ? (
+                        dnsAnswer.ipv4
+                      ) : dnsAnswer.answer_type === 'AAAA' ? (
+                        dnsAnswer.ipv6
+                      ) : dnsAnswer.answer_type === 'CNAME' ? (
+                        dnsAnswer.hostname
+                      ) : (
+                        <>&nbsp;</>
+                      ) // for any other answer_type, DATA column will be empty
+                    }
+                  </td>
+                  <td class="py-1">
+                    {dnsAnswerIpInfo(dnsAnswer) || <>&nbsp;</>}
+                  </td>
+                </tr>
+              ))}
+          </tbody>
+        </table>
       )}
     </div>
   )
@@ -286,6 +269,21 @@ const StyledLink = ({ children, href }) => (
   </Link>
 )
 
+const UrlWrapper = ({ href }) => {
+  const isEmbeddedView = useContext(EmbeddedViewContext)
+
+  return (
+    <ConditionalWrapper
+      condition={!isEmbeddedView}
+      wrapper={(children) => (
+        <StyledLink href={getSearchHref(href)}>{children}</StyledLink>
+      )}
+    >
+      {href}
+    </ConditionalWrapper>
+  )
+}
+
 const WebConnectivityDetails = ({
   isConfirmed,
   isAnomaly,
@@ -312,6 +310,8 @@ const WebConnectivityDetails = ({
     },
   } = validateMeasurement(measurement ?? {})
 
+  const isEmbeddedView = useContext(EmbeddedViewContext)
+
   const intl = useIntl()
   const date = new Intl.DateTimeFormat(intl.locale, {
     dateStyle: 'long',
@@ -335,9 +335,7 @@ const WebConnectivityDetails = ({
         id="Measurement.SummaryText.Websites.Failed"
         values={{
           date,
-          WebsiteURL: (
-            <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
-          ),
+          WebsiteURL: <UrlWrapper href={input} />,
           network: probe_asn,
           country,
         }}
@@ -350,9 +348,7 @@ const WebConnectivityDetails = ({
         id="Measurement.SummaryText.Websites.ConfirmedBlocked"
         values={{
           date,
-          WebsiteURL: (
-            <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
-          ),
+          WebsiteURL: <UrlWrapper href={input} />,
           network: probe_asn,
           country,
         }}
@@ -380,14 +376,15 @@ const WebConnectivityDetails = ({
         id="Measurement.SummaryText.Websites.Anomaly"
         values={{
           date,
-          WebsiteURL: (
-            <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
-          ),
-          'link-to-docs': (string) => (
-            <a href="https://ooni.org/support/faq/#why-do-false-positives-occur">
-              {string}
-            </a>
-          ),
+          WebsiteURL: <UrlWrapper href={input} />,
+          'link-to-docs': (string) =>
+            isEmbeddedView ? (
+              string
+            ) : (
+              <a href="https://ooni.org/support/faq/#why-do-false-positives-occur">
+                {string}
+              </a>
+            ),
           network: probe_asn,
           country,
           reason,
@@ -413,9 +410,7 @@ const WebConnectivityDetails = ({
         id="Measurement.SummaryText.Websites.Accessible"
         values={{
           date,
-          WebsiteURL: (
-            <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
-          ),
+          WebsiteURL: <UrlWrapper href={input} />,
           network: probe_asn,
           country,
         }}
@@ -440,9 +435,7 @@ const WebConnectivityDetails = ({
         id="Measurement.SummaryText.Websites.Down"
         values={{
           date,
-          WebsiteURL: (
-            <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
-          ),
+          WebsiteURL: <UrlWrapper href={input} />,
           network: probe_asn,
           country,
         }}
@@ -468,9 +461,7 @@ const WebConnectivityDetails = ({
         id="Measurement.SummaryText.Websites.Failed"
         values={{
           date,
-          WebsiteURL: (
-            <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
-          ),
+          WebsiteURL: <UrlWrapper href={input} />,
           network: probe_asn,
           country,
         }}
@@ -505,12 +496,19 @@ const WebConnectivityDetails = ({
         statusInfo: (
           <StatusInfo
             title={
-              <Link
-                className="text-white underline hover:text-white"
-                href={`/domain/${hostname}`}
+              <ConditionalWrapper
+                condition={!isEmbeddedView}
+                wrapper={(children) => (
+                  <Link
+                    className="text-white underline hover:text-white"
+                    href={`/domain/${hostname}`}
+                  >
+                    {children}
+                  </Link>
+                )}
               >
                 {input}
-              </Link>
+              </ConditionalWrapper>
             }
             message={reason}
           />
@@ -520,115 +518,111 @@ const WebConnectivityDetails = ({
         details: (
           <>
             {/* Failures */}
-            <div className="flex">
-              <DetailsBox
-                title={
-                  <FormattedMessage id="Measurement.Details.Websites.Failures.Heading" />
-                }
-                content={
-                  <div className="flex mb-2 flex-wrap">
-                    <div className="w-1/3">
-                      <FormattedMessage id="Measurement.Details.Websites.Failures.Label.HTTP" />
-                    </div>
-                    <div className="w-2/3">
-                      <FailureString failure={http_experiment_failure} />
-                    </div>
-                    <div className="w-1/3">
-                      <FormattedMessage id="Measurement.Details.Websites.Failures.Label.DNS" />
-                    </div>
-                    <div className="w-2/3">
-                      <FailureString failure={dns_experiment_failure} />
-                    </div>
-                    <div className="w-1/3">
-                      <FormattedMessage id="Measurement.Details.Websites.Failures.Label.Control" />
-                    </div>
-                    <div className="w-2/3">
-                      <FailureString failure={control_failure} />
-                    </div>
+
+            <DetailsBox
+              title={
+                <FormattedMessage id="Measurement.Details.Websites.Failures.Heading" />
+              }
+              content={
+                <div className="flex mb-2 flex-wrap">
+                  <div className="w-1/2 md:w-1/3">
+                    <FormattedMessage id="Measurement.Details.Websites.Failures.Label.HTTP" />
+                  </div>
+                  <div className="w-1/2 md:w-2/3">
+                    <FailureString failure={http_experiment_failure} />
+                  </div>
+                  <div className="w-1/2 md:w-1/3">
+                    <FormattedMessage id="Measurement.Details.Websites.Failures.Label.DNS" />
+                  </div>
+                  <div className="w-1/2 md:w-2/3">
+                    <FailureString failure={dns_experiment_failure} />
                   </div>
-                }
-              />
-            </div>
+                  <div className="w-1/2 md:w-1/3">
+                    <FormattedMessage id="Measurement.Details.Websites.Failures.Label.Control" />
+                  </div>
+                  <div className="w-1/2 md:w-2/3">
+                    <FailureString failure={control_failure} />
+                  </div>
+                </div>
+              }
+            />
+
             {/* DNS Queries */}
-            <div className="flex">
-              <DetailsBox
-                title={
-                  <FormattedMessage id="Measurement.Details.Websites.DNSQueries.Heading" />
-                }
-                content={
-                  Array.isArray(queries) ? (
-                    <>
-                      <div className="flex flex-wrap mb-2">
-                        <div className="mr-1">
-                          <strong>
-                            <FormattedMessage id="Measurement.Details.Websites.DNSQueries.Label.Resolver" />
-                            :
-                          </strong>
-                        </div>
-                        <div>{client_resolver || '(unknown)'}</div>
-                      </div>
-                      <div className="w-full">
-                        {queries.map((query, index) => (
-                          <QueryContainer key={index} query={query} />
-                        ))}
+
+            <DetailsBox
+              title={
+                <FormattedMessage id="Measurement.Details.Websites.DNSQueries.Heading" />
+              }
+              content={
+                Array.isArray(queries) ? (
+                  <>
+                    <div className="flex flex-wrap mb-2">
+                      <div className="mr-1">
+                        <strong>
+                          <FormattedMessage id="Measurement.Details.Websites.DNSQueries.Label.Resolver" />
+                          :
+                        </strong>
                       </div>
-                    </>
-                  ) : (
-                    <FormattedMessage id="General.NoData" />
-                  )
-                }
-              />
-            </div>
+                      <div>{client_resolver || '(unknown)'}</div>
+                    </div>
+                    <div className="w-full">
+                      {queries.map((query, index) => (
+                        <QueryContainer key={index} query={query} />
+                      ))}
+                    </div>
+                  </>
+                ) : (
+                  <FormattedMessage id="General.NoData" />
+                )
+              }
+            />
+
             {/* TCP COnnections */}
-            <div className="flex">
-              <DetailsBox
-                title={
-                  <FormattedMessage id="Measurement.Details.Websites.TCP.Heading" />
-                }
-                content={
-                  tcpConnections.length > 0 ? (
-                    tcpConnections.map((connection, index) => (
-                      <div className="flex" key={index}>
-                        <div>
-                          <strong>{connection.destination}</strong>:{' '}
-                          {connection.failure
-                            ? `${intl.formatMessage({ id: 'Measurement.Details.Websites.TCP.ConnectionTo.Failed' })} (${connection.failure})`
-                            : intl.formatMessage({
-                                id: 'Measurement.Details.Websites.TCP.ConnectionTo.Success',
-                              })}
-                        </div>
+
+            <DetailsBox
+              title={
+                <FormattedMessage id="Measurement.Details.Websites.TCP.Heading" />
+              }
+              content={
+                tcpConnections.length > 0 ? (
+                  tcpConnections.map((connection, index) => (
+                    <div className="flex" key={index}>
+                      <div>
+                        <strong>{connection.destination}</strong>:{' '}
+                        {connection.failure
+                          ? `${intl.formatMessage({ id: 'Measurement.Details.Websites.TCP.ConnectionTo.Failed' })} (${connection.failure})`
+                          : intl.formatMessage({
+                              id: 'Measurement.Details.Websites.TCP.ConnectionTo.Success',
+                            })}
                       </div>
-                    ))
-                  ) : (
-                    <FormattedMessage id="General.NoData" />
-                  )
-                }
-              />
-            </div>
+                    </div>
+                  ))
+                ) : (
+                  <FormattedMessage id="General.NoData" />
+                )
+              }
+            />
+
             {/* I would like us to enrich the HTTP response body section with
               information about every request and response as this is a very common
             thing we look at when investigating a case. */}
-            <div className="flex">
-              <DetailsBox
-                title={
-                  <FormattedMessage id="Measurement.Details.Websites.HTTP.Heading" />
-                }
-                content={
-                  Array.isArray(requests) ? (
-                    <div className="w-full">
-                      {requests.map((request, index) => (
-                        <RequestResponseContainer
-                          key={index}
-                          request={request}
-                        />
-                      ))}
-                    </div>
-                  ) : (
-                    <FormattedMessage id="General.NoData" />
-                  )
-                }
-              />
-            </div>
+
+            <DetailsBox
+              title={
+                <FormattedMessage id="Measurement.Details.Websites.HTTP.Heading" />
+              }
+              content={
+                Array.isArray(requests) ? (
+                  <div className="w-full">
+                    {requests.map((request, index) => (
+                      <RequestResponseContainer key={index} request={request} />
+                    ))}
+                  </div>
+                ) : (
+                  <FormattedMessage id="General.NoData" />
+                )
+              }
+            />
           </>
         ),
       })}
diff --git a/components/measurement/nettests/WhatsApp.js b/components/measurement/nettests/WhatsApp.js
index 33b2d7ac..3f86f951 100644
--- a/components/measurement/nettests/WhatsApp.js
+++ b/components/measurement/nettests/WhatsApp.js
@@ -62,36 +62,29 @@ const WhatsAppDetails = ({ isAnomaly, scores, measurement, render }) => {
     },
     details: (
       <>
-        <div className="mb-8 w-1/2">
-          <div className="flex">
-            <div className="w-1/3">
-              <AccessPointStatus
-                icon={<MdPhoneAndroid />}
-                label={
-                  <FormattedMessage id="Measurement.Details.WhatsApp.Endpoint.Label.Mobile" />
-                }
-                ok={endpointsAccessible}
-              />
-            </div>
-            <div className="w-1/3">
-              <AccessPointStatus
-                icon={<MdWebAsset />}
-                label={
-                  <FormattedMessage id="Measurement.Details.WhatsApp.Endpoint.Label.Web" />
-                }
-                ok={webAccessible}
-              />
-            </div>
-            <div className="w-1/3">
-              <AccessPointStatus
-                icon={<MdPersonAdd />}
-                label={
-                  <FormattedMessage id="Measurement.Details.WhatsApp.Endpoint.Label.Registration" />
-                }
-                ok={registrationServerAccessible}
-              />
-            </div>
-          </div>
+        <div className="mb-8 flex gap-8 md:gap-12">
+          <AccessPointStatus
+            icon={<MdPhoneAndroid />}
+            label={
+              <FormattedMessage id="Measurement.Details.WhatsApp.Endpoint.Label.Mobile" />
+            }
+            ok={endpointsAccessible}
+          />
+
+          <AccessPointStatus
+            icon={<MdWebAsset />}
+            label={
+              <FormattedMessage id="Measurement.Details.WhatsApp.Endpoint.Label.Web" />
+            }
+            ok={webAccessible}
+          />
+          <AccessPointStatus
+            icon={<MdPersonAdd />}
+            label={
+              <FormattedMessage id="Measurement.Details.WhatsApp.Endpoint.Label.Registration" />
+            }
+            ok={registrationServerAccessible}
+          />
         </div>
         {Array.isArray(tcp_connect) && tcp_connect.length > 0 && (
           <>
diff --git a/package.json b/package.json
index 12a7a361..e96e311e 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "mustache": "^4.2.0",
     "postcss": "^8.4.38",
     "start-server-and-test": "^2.0.3",
-    "tailwindcss": "^3.4.4"
+    "tailwindcss": "^3.4.15"
   },
   "scripts": {
     "dev": "next dev -p 3100",
diff --git a/pages/_app.js b/pages/_app.js
index 2858fa41..b92f363b 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -25,7 +25,7 @@ export default function App({ Component, pageProps, err }) {
   const router = useRouter()
 
   useEffect(() => {
-    const handleStart = (url) => {
+    const handleStart = () => {
       NProgress.start()
     }
     const handleStop = () => {
@@ -52,7 +52,7 @@ export default function App({ Component, pageProps, err }) {
         }
       `}</style>
       <LocaleProvider>
-        <Layout>
+        <Layout isEmbeddedView={!!pageProps?.isEmbeddedView}>
           <Component {...pageProps} err={err} />
         </Layout>
       </LocaleProvider>
diff --git a/pages/m/[measurement_uid].js b/pages/m/[measurement_uid].js
index 9d78b060..2e990871 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 { createContext, 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'],
@@ -30,10 +30,13 @@ const pageColors = {
   confirmed: colors.red['700'],
 }
 
-export async function getServerSideProps({ query }) {
+export const EmbeddedViewContext = createContext(false)
+
+export async function getServerSideProps({ query, req }) {
   let initialProps = {
     error: null,
     userFeedback: null,
+    isEmbeddedView: !!req.headers['enable-embedded-view'] || !!query?.webview,
   }
 
   const measurement_uid = query?.measurement_uid
@@ -117,6 +120,7 @@ const Measurement = ({
   measurement_uid,
   report_id,
   scores,
+  isEmbeddedView,
   ...rest
 }) => {
   const intl = useIntl()
@@ -138,7 +142,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
@@ -147,7 +151,7 @@ const Measurement = ({
   }
 
   return (
-    <>
+    <EmbeddedViewContext.Provider value={isEmbeddedView}>
       <Head>
         <title>{intl.formatMessage({ id: 'General.OoniExplorer' })}</title>
       </Head>
@@ -252,7 +256,7 @@ const Measurement = ({
           />
         </>
       )}
-    </>
+    </EmbeddedViewContext.Provider>
   )
 }
 
diff --git a/yarn.lock b/yarn.lock
index 878cbccf..986c2254 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3036,7 +3036,7 @@ check-more-types@2.24.0, check-more-types@^2.24.0:
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
   integrity sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==
 
-chokidar@^3.5.3:
+chokidar@^3.5.3, chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -3967,7 +3967,7 @@ fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.3.0:
+fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -4756,7 +4756,7 @@ jackspeak@2.1.1, jackspeak@^3.1.2:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
-jiti@^1.21.0:
+jiti@^1.21.6:
   version "1.21.6"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
   integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
@@ -5049,7 +5049,7 @@ merge2@^1.3.0:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-micromatch@^4.0.4, micromatch@^4.0.5:
+micromatch@^4.0.4, micromatch@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
   integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
@@ -5504,6 +5504,11 @@ picocolors@^1.0.0, picocolors@^1.0.1:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
   integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
 
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@@ -5540,7 +5545,7 @@ postcss-js@^4.0.1:
   dependencies:
     camelcase-css "^2.0.1"
 
-postcss-load-config@^4.0.1:
+postcss-load-config@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
   integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
@@ -5548,14 +5553,14 @@ postcss-load-config@^4.0.1:
     lilconfig "^3.0.0"
     yaml "^2.3.4"
 
-postcss-nested@^6.0.1:
+postcss-nested@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
   integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
   dependencies:
     postcss-selector-parser "^6.1.1"
 
-postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.1.1:
+postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
   integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
@@ -5577,7 +5582,7 @@ postcss@8.4.31:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.23, postcss@^8.4.38:
+postcss@^8.4.38:
   version "8.4.45"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.45.tgz#538d13d89a16ef71edbf75d895284ae06b79e603"
   integrity sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==
@@ -5586,6 +5591,15 @@ postcss@^8.4.23, postcss@^8.4.38:
     picocolors "^1.0.1"
     source-map-js "^1.2.0"
 
+postcss@^8.4.47:
+  version "8.4.49"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 postgres-array@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postgres-array/-/postgres-array-2.0.0.tgz#48f8fce054fbc69671999329b8834b772652d82e"
@@ -6077,7 +6091,7 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@1.22.8, resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.2, resolve@^1.22.8:
+resolve@1.22.8, resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.8:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -6297,6 +6311,11 @@ source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
+source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -6433,7 +6452,7 @@ stylis@4.2.0:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-sucrase@^3.32.0:
+sucrase@^3.35.0:
   version "3.35.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
   integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
@@ -6508,33 +6527,33 @@ tailwind-merge@^2.5.2:
   resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.5.2.tgz#000f05a703058f9f9f3829c644235f81d4c08a1f"
   integrity sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==
 
-tailwindcss@^3.4.4:
-  version "3.4.10"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.10.tgz#70442d9aeb78758d1f911af29af8255ecdb8ffef"
-  integrity sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==
+tailwindcss@^3.4.15:
+  version "3.4.15"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.15.tgz#04808bf4bf1424b105047d19e7d4bfab368044a9"
+  integrity sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
-    chokidar "^3.5.3"
+    chokidar "^3.6.0"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.3.0"
+    fast-glob "^3.3.2"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    jiti "^1.21.0"
+    jiti "^1.21.6"
     lilconfig "^2.1.0"
-    micromatch "^4.0.5"
+    micromatch "^4.0.8"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
-    picocolors "^1.0.0"
-    postcss "^8.4.23"
+    picocolors "^1.1.1"
+    postcss "^8.4.47"
     postcss-import "^15.1.0"
     postcss-js "^4.0.1"
-    postcss-load-config "^4.0.1"
-    postcss-nested "^6.0.1"
-    postcss-selector-parser "^6.0.11"
-    resolve "^1.22.2"
-    sucrase "^3.32.0"
+    postcss-load-config "^4.0.2"
+    postcss-nested "^6.2.0"
+    postcss-selector-parser "^6.1.2"
+    resolve "^1.22.8"
+    sucrase "^3.35.0"
 
 thenify-all@^1.0.0:
   version "1.6.0"