diff --git a/src/styles/app.scss b/src/styles/app.scss
index fa437c6..d9a4f5b 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -9,6 +9,11 @@ $mobile-breakpoint: "384px";
     @media (max-width: $mobile-breakpoint) { @content; }
 }
 
+// For the desktop screens that are smaller on height so the full plugin is not visible (close button is not visible)
+@mixin low-height-screen {
+    @media (max-height: 680px) { @content; }
+}
+
 @function rem($value) {
     $remValue: calc($value / 16) + rem;
 
diff --git a/src/styles/components/wrapper.scss b/src/styles/components/wrapper.scss
index 72c4718..60abdea 100644
--- a/src/styles/components/wrapper.scss
+++ b/src/styles/components/wrapper.scss
@@ -34,6 +34,14 @@
             border-radius: 0;
         }
 
+        @include low-height-screen {
+            top: 0;
+            right: 0;
+            bottom: 0;
+
+            border-radius: 0;
+        }
+
         .swp-chat-box {
             position: relative;
             z-index: 4;
@@ -54,6 +62,10 @@
                 height: 100%;
             }
 
+            @include low-height-screen {
+                height: 100%;
+            }
+
             .swp-chat-box-loader {
                 position: absolute;
 
@@ -117,6 +129,11 @@
                 width: 100%;
                 height: 0;
             }
+
+            @include low-height-screen {
+                flex-grow: 1;
+                height: 0;
+            }
         }
     }
 }