From 97875aa386402b9e2eb8c32aab6712ef8d7e5b15 Mon Sep 17 00:00:00 2001
From: Mat Jordan <mat@northwestern.edu>
Date: Thu, 9 Mar 2023 13:25:39 -0500
Subject: [PATCH] Make OSD controls more usable in smallest viewports.

---
 src/components/ImageViewer/Button.styled.tsx    | 17 +++++++++++++++--
 src/components/ImageViewer/Controls.styled.tsx  |  5 +++++
 .../ImageViewer/ImageViewer.styled.tsx          |  5 +++++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/ImageViewer/Button.styled.tsx b/src/components/ImageViewer/Button.styled.tsx
index d58cdeab..ea48b4d6 100644
--- a/src/components/ImageViewer/Button.styled.tsx
+++ b/src/components/ImageViewer/Button.styled.tsx
@@ -13,11 +13,24 @@ const Item = styled("button", {
   color: "white",
   cursor: "pointer",
   marginLeft: "0.618rem",
-  backgroundColor: "#000D",
-  filter: "drop-shadow(5px 5px 5px #0006)",
+  backgroundColor: "$primary",
+  filter: "drop-shadow(2px 2px 5px #0003)",
   transition: "$all",
   boxSizing: "content-box !important",
 
+  "&:first-child": {
+    marginLeft: "0",
+  },
+
+  "@xs": {
+    marginBottom: "0.618rem",
+    marginLeft: "0",
+
+    "&:last-child": {
+      marginBottom: "0",
+    },
+  },
+
   svg: {
     height: "60%",
     width: "60%",
diff --git a/src/components/ImageViewer/Controls.styled.tsx b/src/components/ImageViewer/Controls.styled.tsx
index bc984937..762a289f 100644
--- a/src/components/ImageViewer/Controls.styled.tsx
+++ b/src/components/ImageViewer/Controls.styled.tsx
@@ -6,6 +6,11 @@ const Wrapper = styled("div", {
   top: "1rem",
   right: "1rem",
   display: "flex",
+
+  "@xs": {
+    flexDirection: "column",
+    zIndex: "2",
+  },
 });
 
 export { Wrapper };
diff --git a/src/components/ImageViewer/ImageViewer.styled.tsx b/src/components/ImageViewer/ImageViewer.styled.tsx
index 62109c45..7dc2ab44 100644
--- a/src/components/ImageViewer/ImageViewer.styled.tsx
+++ b/src/components/ImageViewer/ImageViewer.styled.tsx
@@ -20,6 +20,11 @@ const Navigator = styled("div", {
     width: "123px",
     height: "76px",
   },
+
+  "@xs": {
+    width: "100px",
+    height: "61.8px",
+  },
 });
 
 const Viewport = styled("div", {