style: correct text overflowing

agrc · Jun 13, 2024 · 1c9aa70 · 1c9aa70
1 parent d4a2b44
commit 1c9aa70
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/src/components/DropzoneMessaging.jsx b/src/components/DropzoneMessaging.jsx
@@ -11,7 +11,7 @@ const DropzoneMessaging = ({ isDragActive, file, validation }) => {
 
   if (file) {
     return (
-      <div className="flex flex-col items-center">
+      <div className="w-full px-6 text-center">
         {validation === 'validating' && (
           <p className="my-0 flex items-center rounded border border-gray-300 bg-gray-200 py-2 px-3 shadow">
             <span className="mr-2">Checking CSV for problems</span>
@@ -20,12 +20,10 @@ const DropzoneMessaging = ({ isDragActive, file, validation }) => {
             </span>
           </p>
         )}
-        <h2 className="my-1 truncate lowercase text-gray-400">
-          {file.name}
-          {geocodeContext.data.valid && (
-            <HandThumbUpIcon className="ml-2 inline-flex w-12 align-text-bottom text-indigo-900" />
-          )}
-        </h2>
+        <h2 className="my-1 truncate lowercase text-gray-400">{file.name}</h2>
+        {geocodeContext.data.valid && (
+          <HandThumbUpIcon className="mt-2 inline-flex w-12 align-text-bottom text-indigo-900" />
+        )}
       </div>
     );
   }

diff --git a/src/pages/Geocoding.jsx b/src/pages/Geocoding.jsx
@@ -145,18 +145,24 @@ export default function Geocoding() {
                 has a thumbs up on the API page and create a new key if this is incorrect.
               </li>
               <li>
-                <strong>The Web API is having trouble.</strong>{' '}
+                <strong>The API is having trouble.</strong>{' '}
                 <a href="https://agrc-status.netlify.app" target="_blank" rel="noopener noreferrer">
                   Check our status page
                 </a>{' '}
                 for any reported outages.
               </li>
             </ol>
-            <p>
-              This is the Web API response for the last request (street: {stats.lastRequest?.request.street}, zone:{' '}
-              {stats.lastRequest?.request.zone}) to help debug the issue
-            </p>
-            <pre className="mx-6 whitespace-normal rounded border-red-800 bg-red-400 px-3 py-2 text-white shadow">
+            <div>
+              <p>This was the API response for the last request to help debug the issue</p>
+              <div className="text-base">
+                <span className="font-semibold">street: </span>
+                {stats.lastRequest?.request.street}
+              </div>
+              <div className="text-base">
+                <span className="font-semibold">zone:</span> {stats.lastRequest?.request.zone}
+              </div>
+            </div>
+            <pre className="mx-6 whitespace-normal truncate overflow-hidden rounded border-red-800 bg-red-400 px-3 py-2 text-white shadow">
               <div className="mb-2">{stats.lastRequest.request.url}</div>
               <div>
                 {stats.lastRequest?.response.status} -{' '}

diff --git a/src/pages/Plan.jsx b/src/pages/Plan.jsx
@@ -29,7 +29,7 @@ export default function Plan() {
           <span className="block text-base text-gray-400">to complete</span>
         </div>
       </section>
-      <h3 className="text-center">{geocodeContext.data.file.name}</h3>
+      <h3 className="text-center truncate px-4">{geocodeContext.data.file.name}</h3>
       <button onClick={start} type="button">
         Start
       </button>