From 85ea58070274189125f5ba9ee11ae760a35ce22d Mon Sep 17 00:00:00 2001
From: Thomas Wang <thomas@teaminkling.com>
Date: Sat, 28 Sep 2024 15:02:31 +1000
Subject: [PATCH] Fix styling issues on mobile devices

---
 components/gallery-item.tsx | 8 +-------
 components/paginator.tsx    | 4 ++--
 components/sorter.tsx       | 2 +-
 pages/works/@id/+Page.tsx   | 2 +-
 4 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/components/gallery-item.tsx b/components/gallery-item.tsx
index f1fc9599..fee27f16 100644
--- a/components/gallery-item.tsx
+++ b/components/gallery-item.tsx
@@ -36,13 +36,7 @@ const GalleryItem = (props: ItemProps) => {
   if (title) {
     return (
       <div className="flex-col xl:flex xl:flex-row">
-        <div
-          className="px-2 py-2 md:px-3 md:py-4 hover:opacity-95"
-          style={{
-            minWidth: 800,
-            minHeight: 600,
-          }}
-        >
+        <div className="px-2 py-2 md:px-3 md:py-4 hover:opacity-95">
           <a href={`/works/${props.id}`}>
             <img
               src={props.retinaPreview}
diff --git a/components/paginator.tsx b/components/paginator.tsx
index 0ffac370..1707710c 100644
--- a/components/paginator.tsx
+++ b/components/paginator.tsx
@@ -35,7 +35,7 @@ export default function Paginator({ worksMatchingQuery }: PaginatorProps) {
   const isRandom = sort === "random" || !sort;
   if (isRandom) {
     return (
-      <div className="pb-5" style={{ maxWidth: "132px" }}>
+      <div className="pb-5 mx-auto md:mx-0" style={{ maxWidth: "132px" }}>
         <InterfaceLink
           location={`?rand=${Math.random().toString().replace(".", "")}${newParams}`}
           title="Shuffle"
@@ -46,7 +46,7 @@ export default function Paginator({ worksMatchingQuery }: PaginatorProps) {
   }
 
   return (
-    <div className="flex pb-5">
+    <div className="flex pb-5 mx-auto md:mx-0">
       <SquareLink
         location={`?p=${previousPage}${newParams}`}
         icon={<FaAngleDoubleLeft />}
diff --git a/components/sorter.tsx b/components/sorter.tsx
index fe07256c..2cdd6f4d 100644
--- a/components/sorter.tsx
+++ b/components/sorter.tsx
@@ -22,7 +22,7 @@ export default function Sorter(props: SorterProps) {
   const newParams = `${searchParam}${artistParam}${weekParam}`;
 
   return (
-    <div className="flex flex-row py-2 items-center">
+    <div className="flex flex-row py-2 items-center justify-center md:justify-start">
       <p className="px-2 text-center">
         <b>Sort:</b>
       </p>
diff --git a/pages/works/@id/+Page.tsx b/pages/works/@id/+Page.tsx
index cdb00a43..83339052 100644
--- a/pages/works/@id/+Page.tsx
+++ b/pages/works/@id/+Page.tsx
@@ -129,7 +129,7 @@ export default function SingleWork() {
 
             <h2 className="text-3xl pb-4">
               by&nbsp;
-              <a href={`/artists/${artistName}`} className="underline" style={{color: "#7C7CE0"}}>
+              <a href={`/artists/${artistName}`} className="underline" style={{ color: "#7C7CE0" }}>
                 {artistName}
               </a>
               <p className="text-sm mt-3 text-gray-400">