diff --git a/app/javascript/styles/chinwag/variables.scss b/app/javascript/styles/chinwag/variables.scss
index 38fe54582..ea173442f 100644
--- a/app/javascript/styles/chinwag/variables.scss
+++ b/app/javascript/styles/chinwag/variables.scss
@@ -40,3 +40,8 @@ $status-spoilers-active-background: $classic-highlight-color;
 
 // Language codes that uses CJK fonts
 $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
\ No newline at end of file
diff --git a/app/javascript/styles/chinwag_light/variables.scss b/app/javascript/styles/chinwag_light/variables.scss
index 4c02a20b7..2a82956ed 100644
--- a/app/javascript/styles/chinwag_light/variables.scss
+++ b/app/javascript/styles/chinwag_light/variables.scss
@@ -40,3 +40,8 @@ $status-spoilers-active-background: $classic-highlight-color;
 
 // Language codes that uses CJK fonts
 $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon_light/variables.scss b/app/javascript/styles/mastodon_light/variables.scss
index 4a9947d1d..f038d31ec 100644
--- a/app/javascript/styles/mastodon_light/variables.scss
+++ b/app/javascript/styles/mastodon_light/variables.scss
@@ -40,3 +40,8 @@ $status-spoilers-active-background: $classic-highlight-color;
 
 // Language codes that uses CJK fonts
 $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
\ No newline at end of file