From 01fb0806cd17b8bb50289c06bcb38ac0178ab7c5 Mon Sep 17 00:00:00 2001
From: udayjordan <udayjordan1@gmail.com>
Date: Tue, 15 Oct 2024 02:43:32 +0530
Subject: [PATCH]  Fix for issue #1322 : Changed the media query for better
 margin and padding to add a responsiveness

---
 .../app/components/WebView/style.module.css   | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/desktop-app-legacy/app/components/WebView/style.module.css b/desktop-app-legacy/app/components/WebView/style.module.css
index b0a268e5c..a35c986ec 100644
--- a/desktop-app-legacy/app/components/WebView/style.module.css
+++ b/desktop-app-legacy/app/components/WebView/style.module.css
@@ -121,3 +121,59 @@
 .withMarginRight {
   margin-right: 5rem;
 }
+
+/* For tablets (iPad Mini, iPad Pro, general tablet size) */
+@media (max-width: 1024px) {
+  .webViewContainer {
+    min-width: 150px;
+  }
+  .webViewToolbar {
+    margin: 5px 2px;
+    flex-direction: column;
+  }
+  .webViewToolbarIcons {
+    height: 25px;
+    width: 25px;
+  }
+  .resizableView {
+    margin: 0 0.5rem 0.5rem 0;
+  }
+}
+
+/* For mobile devices (iPhone X, iPhone 14 Pro) */
+@media (max-width: 768px) {
+  .webViewContainer {
+    min-width: 120px;
+  }
+  .webViewToolbar {
+    margin: 3px 1px;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .webViewToolbarIcons {
+    height: 20px;
+    width: 20px;
+  }
+  .resizableView {
+    margin: 0 0.25rem 0.25rem 0;
+  }
+}
+
+/* For small screens */
+@media (max-width: 480px) {
+  .webViewContainer {
+    min-width: 100px;
+  }
+  .webViewToolbar {
+    margin: 2px 1px;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .webViewToolbarIcons {
+    height: 18px;
+    width: 18px;
+  }
+  .resizableView {
+    margin: 0 0.25rem 0.25rem 0;
+  }
+}