Layout improvements

ooni · Nov 7, 2024 · 9354905 · 9354905
1 parent 7860298
commit 9354905
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 31 deletions.
diff --git a/components/measurement/CommonDetails.js b/components/measurement/CommonDetails.js
@@ -139,37 +139,31 @@ 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
           title={
-            <div className="flex flex-1 px-4 justify-between flex-col md:flex-row items-center bg-gray-200">
-              <div>
+            <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',
                 })}

diff --git a/components/measurement/CommonSummary.js b/components/measurement/CommonSummary.js
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
 import { useContext } from 'react'
 import { MdOutlineFactCheck } from 'react-icons/md'

diff --git a/components/measurement/DetailsBox.js b/components/measurement/DetailsBox.js
@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
 import { useCallback, useContext, useState } from 'react'
 import { MdExpandLess } from 'react-icons/md'
@@ -11,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>
     ))}
@@ -47,7 +46,7 @@ export const DetailsBox = ({
 
   return (
     <div
-      className={twMerge('border-2 border-gray-200 w-full mb-4', className)}
+      className={twMerge('border-2 border-gray-200 w-full mb-8', className)}
       {...rest}
     >
       {title &&

diff --git a/components/measurement/StatusInfo.js b/components/measurement/StatusInfo.js
@@ -2,7 +2,10 @@ import PropTypes from 'prop-types'
 
 const StatusInfo = ({ title, message }) => (
   <div className="flex flex-col">
-    <div className="text-center text-3xl mb-3 break-words"> {title} </div>
+    <div className="text-center text-2xl md:text-3xl mb-3 break-words">
+      {' '}
+      {title}{' '}
+    </div>
     <div className="text-center text-lg font-bold whitespace-pre">
       {' '}
       {message}{' '}

diff --git a/components/measurement/SummaryText.js b/components/measurement/SummaryText.js
@@ -32,7 +32,7 @@ const SummaryText = ({ testName, network, country, date, content }) => {
   }
   return (
     <div className="flex">
-      <div className="py-8 text-xl">{textToRender}</div>
+      <div className="py-8 text-base md:text-xl">{textToRender}</div>
     </div>
   )
 }

diff --git a/components/measurement/nettests/WebConnectivity.js b/components/measurement/nettests/WebConnectivity.js
@@ -1,7 +1,6 @@
 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 { Fragment, useContext } from 'react'
@@ -131,7 +130,7 @@ const FailureString = ({ failure }) => {
   }
 
   return (
-    <div>
+    <div className="flex">
       <Cross size={20} /> {failure}
     </div>
   )