From 6a6545305c3f413be708729f7e912bb2d6ce509c Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Mon, 17 Apr 2023 15:28:00 +1000
Subject: [PATCH] Use 100% width on cards in mobile (#3576)

---
 ui/v2.5/src/components/Galleries/styles.scss  | 4 ++++
 ui/v2.5/src/components/Images/styles.scss     | 4 ++++
 ui/v2.5/src/components/Performers/styles.scss | 4 ++++
 ui/v2.5/src/components/Scenes/styles.scss     | 8 ++++++++
 ui/v2.5/src/components/Tags/styles.scss       | 4 ++++
 5 files changed, 24 insertions(+)

diff --git a/ui/v2.5/src/components/Galleries/styles.scss b/ui/v2.5/src/components/Galleries/styles.scss
index 7aa1bf052..cb88a360e 100644
--- a/ui/v2.5/src/components/Galleries/styles.scss
+++ b/ui/v2.5/src/components/Galleries/styles.scss
@@ -26,6 +26,10 @@
     overflow: hidden;
     padding: 0;
     padding-bottom: 1rem;
+
+    @media (max-width: 576px) {
+      width: 100%;
+    }
   }
 
   .card-section {
diff --git a/ui/v2.5/src/components/Images/styles.scss b/ui/v2.5/src/components/Images/styles.scss
index 9216bc92d..891943b15 100644
--- a/ui/v2.5/src/components/Images/styles.scss
+++ b/ui/v2.5/src/components/Images/styles.scss
@@ -17,6 +17,10 @@
   &.card {
     overflow: hidden;
     padding: 0;
+
+    @media (max-width: 576px) {
+      width: 100%;
+    }
   }
 
   .rating-banner {
diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss
index a314ea991..ecf2ffbe1 100644
--- a/ui/v2.5/src/components/Performers/styles.scss
+++ b/ui/v2.5/src/components/Performers/styles.scss
@@ -68,6 +68,10 @@
 .performer-card {
   width: 20rem;
 
+  @media (max-width: 576px) {
+    width: 100%;
+  }
+
   .thumbnail-section {
     position: relative;
   }
diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
index 53b1a205b..31e5de8d1 100644
--- a/ui/v2.5/src/components/Scenes/styles.scss
+++ b/ui/v2.5/src/components/Scenes/styles.scss
@@ -89,6 +89,10 @@ textarea.scene-description {
 .studio-card {
   padding: 0.5rem;
 
+  @media (max-width: 576px) {
+    width: 100%;
+  }
+
   &-header {
     height: 150px;
     line-height: 150px;
@@ -241,6 +245,10 @@ textarea.scene-description {
   overflow: hidden;
   padding: 0;
 
+  @media (max-width: 576px) {
+    width: 100%;
+  }
+
   &.fileless {
     background-color: darken($card-bg, 5%);
   }
diff --git a/ui/v2.5/src/components/Tags/styles.scss b/ui/v2.5/src/components/Tags/styles.scss
index ba325207e..d5aeccc7c 100644
--- a/ui/v2.5/src/components/Tags/styles.scss
+++ b/ui/v2.5/src/components/Tags/styles.scss
@@ -22,6 +22,10 @@
 .tag-card {
   padding: 0.5rem;
 
+  @media (max-width: 576px) {
+    width: 100%;
+  }
+
   &-image {
     display: block;
     margin: 0 auto;