From 66a6a663ba28f5a2bba252a8c4483ddeffa5bfab Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Tue, 24 Sep 2024 02:53:11 +0300
Subject: [PATCH] Prevent line wraps on mobile for ratings

---
 frontend/src/Components/ImdbRating.css              | 4 ++++
 frontend/src/Components/ImdbRating.css.d.ts         | 1 +
 frontend/src/Components/ImdbRating.tsx              | 2 +-
 frontend/src/Components/RottenTomatoRating.css      | 4 ++++
 frontend/src/Components/RottenTomatoRating.css.d.ts | 1 +
 frontend/src/Components/RottenTomatoRating.tsx      | 2 +-
 frontend/src/Components/TmdbRating.css              | 4 ++++
 frontend/src/Components/TmdbRating.css.d.ts         | 1 +
 frontend/src/Components/TmdbRating.tsx              | 2 +-
 frontend/src/Components/TraktRating.css             | 4 ++++
 frontend/src/Components/TraktRating.css.d.ts        | 1 +
 frontend/src/Components/TraktRating.tsx             | 2 +-
 12 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Components/ImdbRating.css b/frontend/src/Components/ImdbRating.css
index 0dd8f64ec4..106489a3f4 100644
--- a/frontend/src/Components/ImdbRating.css
+++ b/frontend/src/Components/ImdbRating.css
@@ -1,3 +1,7 @@
+.wrapper {
+  display: inline-block;
+}
+
 .image {
   align-content: center;
   margin-right: 5px;
diff --git a/frontend/src/Components/ImdbRating.css.d.ts b/frontend/src/Components/ImdbRating.css.d.ts
index c5c2756fab..5855b08615 100644
--- a/frontend/src/Components/ImdbRating.css.d.ts
+++ b/frontend/src/Components/ImdbRating.css.d.ts
@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'image': string;
+  'wrapper': string;
 }
 export const cssExports: CssExports;
 export default cssExports;
diff --git a/frontend/src/Components/ImdbRating.tsx b/frontend/src/Components/ImdbRating.tsx
index f2d9ce1b6c..68810b5baf 100644
--- a/frontend/src/Components/ImdbRating.tsx
+++ b/frontend/src/Components/ImdbRating.tsx
@@ -23,7 +23,7 @@ function ImdbRating(props: ImdbRatingProps) {
   return (
     <Tooltip
       anchor={
-        <span>
+        <span className={styles.wrapper}>
           {!hideIcon && (
             <img
               className={styles.image}
diff --git a/frontend/src/Components/RottenTomatoRating.css b/frontend/src/Components/RottenTomatoRating.css
index 0dd8f64ec4..106489a3f4 100644
--- a/frontend/src/Components/RottenTomatoRating.css
+++ b/frontend/src/Components/RottenTomatoRating.css
@@ -1,3 +1,7 @@
+.wrapper {
+  display: inline-block;
+}
+
 .image {
   align-content: center;
   margin-right: 5px;
diff --git a/frontend/src/Components/RottenTomatoRating.css.d.ts b/frontend/src/Components/RottenTomatoRating.css.d.ts
index c5c2756fab..5855b08615 100644
--- a/frontend/src/Components/RottenTomatoRating.css.d.ts
+++ b/frontend/src/Components/RottenTomatoRating.css.d.ts
@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'image': string;
+  'wrapper': string;
 }
 export const cssExports: CssExports;
 export default cssExports;
diff --git a/frontend/src/Components/RottenTomatoRating.tsx b/frontend/src/Components/RottenTomatoRating.tsx
index 2b88809ce8..83af2959b6 100644
--- a/frontend/src/Components/RottenTomatoRating.tsx
+++ b/frontend/src/Components/RottenTomatoRating.tsx
@@ -24,7 +24,7 @@ function RottenTomatoRating(props: RottenTomatoRatingProps) {
   const ratingImage = value > 50 ? rtFresh : rtRotten;
 
   return (
-    <span>
+    <span className={styles.wrapper}>
       {!hideIcon && (
         <img
           className={styles.image}
diff --git a/frontend/src/Components/TmdbRating.css b/frontend/src/Components/TmdbRating.css
index 0dd8f64ec4..106489a3f4 100644
--- a/frontend/src/Components/TmdbRating.css
+++ b/frontend/src/Components/TmdbRating.css
@@ -1,3 +1,7 @@
+.wrapper {
+  display: inline-block;
+}
+
 .image {
   align-content: center;
   margin-right: 5px;
diff --git a/frontend/src/Components/TmdbRating.css.d.ts b/frontend/src/Components/TmdbRating.css.d.ts
index c5c2756fab..5855b08615 100644
--- a/frontend/src/Components/TmdbRating.css.d.ts
+++ b/frontend/src/Components/TmdbRating.css.d.ts
@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'image': string;
+  'wrapper': string;
 }
 export const cssExports: CssExports;
 export default cssExports;
diff --git a/frontend/src/Components/TmdbRating.tsx b/frontend/src/Components/TmdbRating.tsx
index a2a66151e3..b70298582b 100644
--- a/frontend/src/Components/TmdbRating.tsx
+++ b/frontend/src/Components/TmdbRating.tsx
@@ -22,7 +22,7 @@ function TmdbRating(props: TmdbRatingProps) {
   return (
     <Tooltip
       anchor={
-        <span>
+        <span className={styles.wrapper}>
           {!hideIcon && (
             <img
               className={styles.image}
diff --git a/frontend/src/Components/TraktRating.css b/frontend/src/Components/TraktRating.css
index 0dd8f64ec4..106489a3f4 100644
--- a/frontend/src/Components/TraktRating.css
+++ b/frontend/src/Components/TraktRating.css
@@ -1,3 +1,7 @@
+.wrapper {
+  display: inline-block;
+}
+
 .image {
   align-content: center;
   margin-right: 5px;
diff --git a/frontend/src/Components/TraktRating.css.d.ts b/frontend/src/Components/TraktRating.css.d.ts
index c5c2756fab..5855b08615 100644
--- a/frontend/src/Components/TraktRating.css.d.ts
+++ b/frontend/src/Components/TraktRating.css.d.ts
@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'image': string;
+  'wrapper': string;
 }
 export const cssExports: CssExports;
 export default cssExports;
diff --git a/frontend/src/Components/TraktRating.tsx b/frontend/src/Components/TraktRating.tsx
index 80a03a8066..ad0c94b8c3 100644
--- a/frontend/src/Components/TraktRating.tsx
+++ b/frontend/src/Components/TraktRating.tsx
@@ -22,7 +22,7 @@ function TraktRating(props: TraktRatingProps) {
   return (
     <Tooltip
       anchor={
-        <span>
+        <span className={styles.wrapper}>
           {!hideIcon && (
             <img
               className={styles.image}