[examples/openspending][xs]: center align footer and make file previews wider

examples/openspending/components/_shared/Footer.tsx

@@ -4,21 +4,18 @@ export default function Footer() {
   return (
     <footer>
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col items-center justify-between md:flex-row">
-        <div className="flex gap-x-2 items-center">
+        <div className="flex gap-x-2 items-center mx-auto">
           <p className="mt-8 text-base text-slate-500 md:mt-0">Maintained by</p>
-          <a href="https://www.datopian.com/">
+          <a href="https://www.datopian.com/" target="_blank">
             <Image
               alt="Datopian logo"
               className="mb-2"
               src="/datopian-logotype.png"
-              width={160}
+              width={120}
-              height={40}
+              height={30}
             />
           </a>
         </div>
-        <p className="mt-6 text-base text-slate-500 md:mt-0">
-          Copyright © 2023 Datopian, LLC. All rights reserved.
-        </p>
       </div>
     </footer>
   );

examples/openspending/pages/@org/[org]/[project].tsx

@@ -68,8 +68,8 @@ export default function ProjectPage({
       Metadata
     </th>
   </tr>
-            </thead>
+</thead>
-            <tbody className="divide-y divide-gray-200">
+<tbody className="divide-y divide-gray-200">
   <tr>
     <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
     {project.name}
@@ -89,9 +89,9 @@ export default function ProjectPage({
   >
     datapackage.json <ExternalLinkIcon className="ml-1" />
   </Link>
-                </td>
+</td>
   </tr>
-            </tbody>
+</tbody>
           </table>
         </div>
 
@@ -99,8 +99,8 @@ export default function ProjectPage({
         <p>
           This dataset contains {project.files.length} file
   {project.files.length == 1 ? '' : 's'}
-        </p>
+</p>
-        <div className="inline-block min-w-full py-2 align-middle">
+<div className="inline-block min-w-full py-2 align-middle">
   <table className="mt-0 min-w-full divide-y divide-gray-300">
     <thead>
       <tr>
@@ -122,7 +122,7 @@ export default function ProjectPage({
   >
     Size
   </th>
-              </tr>
+</tr>
     </thead>
     <tbody className="divide-y divide-gray-200">
     {project.files?.map((file) => {
@@ -159,16 +159,16 @@ export default function ProjectPage({
         }
               >
   Download
-                      </Link>
+</Link>
             </td>
           </tr>
       );
     })}
   </tbody>
-          </table>
+</table>
-        </div>
+</div>
 
-        <div className="flex flex-col gap-y-16 ">
+<div className="flex flex-col gap-y-16 ">
   {project.files?.map((file) => {
     let size: number | string = file.size;
 
@@ -182,9 +182,9 @@ export default function ProjectPage({
       }
     }
     return (
-              <div key={file.name}>
+      <div key={file.name} >
       {file.path && (
-                  <>
+        <div className='lg:ml-[calc(50%-37vw)] lg:w-[74vw]'>
           <h4>
         {file.name}
         {file.format ? `.${file.format}` : ''}
@@ -192,6 +192,7 @@ export default function ProjectPage({
         {file.bytes >= 5132288 && (
           <span>Previewing 5MB out of {size}</span>
         )}
+        <div className='mt-5'>
           <FlatUiTable
         url={
           file.path.startsWith('http')
@@ -199,12 +200,13 @@ export default function ProjectPage({
           : `https://raw.githubusercontent.com/${project.owner.name}/${project.repo.name}/main/${file.path}`
         }
         />
-                  </>
+      </div>
+    </div>
       )}
     </div>
     );
   })}
-        </div>
+</div>
 
   {readme && (
     <>
@@ -213,7 +215,7 @@ export default function ProjectPage({
       <h2 className="uppercase font-black">Readme</h2>
       <ReactMarkdown remarkPlugins={[remarkGfm]}>{readme}</ReactMarkdown>
     </>
-        )}
+)}
       </main>
     </Layout>
   );