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 + } } 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);