From 930edee39c5fd95431612750464ec358b808f56c Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Wed, 12 Oct 2022 12:30:54 -0700
Subject: [PATCH] Completely get rid of padding on mobile

---
 src/App.vue               | 8 +++++++-
 src/components/Folder.vue | 6 +++---
 src/components/Photo.vue  | 2 ++
 src/components/Tag.vue    | 6 +++---
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5378cd5e..2067c4d8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -115,7 +115,13 @@ export default class App extends Mixins(GlobalMixin, UserConfig) {
 }
 
 @media (max-width: 768px) {
-    .outer { padding: 0px; }
+    .outer {
+        padding: 0px;
+
+        // Get rid of padding on img-outer (1px on mobile)
+        margin-left: -1px;
+        width: calc(100% + 3px); // 1px extra here because ... reasons
+    }
 }
 </style>
 
diff --git a/src/components/Folder.vue b/src/components/Folder.vue
index cd07e8f7..297991d3 100644
--- a/src/components/Folder.vue
+++ b/src/components/Folder.vue
@@ -176,9 +176,9 @@ export default class Folder extends Mixins(GlobalMixin) {
     z-index: 3;
     line-height: 0;
     position: absolute;
-    height: calc(100% - 4px);
-    width: calc(100% - 4px);
-    top: 2px; left: 2px;
+    height: 100%; width: 100%;
+    padding: 2px;
+    @media (max-width: 768px) { padding: 1px; }
 
     > .img-outer {
         background-color: var(--color-background-dark);
diff --git a/src/components/Photo.vue b/src/components/Photo.vue
index 2a743709..12b2f3c2 100644
--- a/src/components/Photo.vue
+++ b/src/components/Photo.vue
@@ -260,6 +260,8 @@ export default class Photo extends Mixins(GlobalMixin) {
 /* Actual image */
 div.img-outer {
     padding: 2px;
+    @media (max-width: 768px) { padding: 1px; }
+
     transition: transform 0.1s ease;
     background-clip: content-box, padding-box;
     background-color: var(--color-background-dark);
diff --git a/src/components/Tag.vue b/src/components/Tag.vue
index e6a8b9a7..a11aba55 100644
--- a/src/components/Tag.vue
+++ b/src/components/Tag.vue
@@ -209,9 +209,9 @@ export default class Tag extends Mixins(GlobalMixin) {
     z-index: 3;
     line-height: 0;
     position: absolute;
-    height: calc(100% - 4px);
-    width: calc(100% - 4px);
-    top: 2px; left: 2px;
+    height: 100%; width: 100%;
+    padding: 2px;
+    @media (max-width: 768px) { padding: 1px; }
 
     > .img-outer {
         background-color: var(--color-background-dark);