diff --git a/package.json b/package.json
index c26befc..7fd81e8 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "description": "\"social-plugin\"",
   "scripts": {
     "postinstall": "./node_modules/.bin/bower install",
-    "test": "./node_modules/.bin/karma start --single-run --browsers PhantomJS"
+    "test": "./node_modules/.bin/karma start --single-run --browsers PhantomJS",
+    "build": "cd .. && rm -rf socialPlugin.zip && zip -r socialPlugin.zip socialPlugin/ -x *.git* *node_modules/*"
   },
   "keywords": [
     "angularjs",
diff --git a/widget/assets/css/style.css b/widget/assets/css/style.css
index 33a4184..6e058b7 100644
--- a/widget/assets/css/style.css
+++ b/widget/assets/css/style.css
@@ -341,6 +341,7 @@
     z-index: 11;
 }
 
+
 .holder.bottom-post hr {
     margin: 0;
 }
@@ -460,6 +461,7 @@
     position: relative;
 }
 
+
 .play-btn:after {
     content: "\e612";
     font-family: 'icomoon';
@@ -801,4 +803,33 @@ textarea {
     margin-left: 10px;
     font-size: 17px;
     vertical-align: 3px;
+}
+
+.thread-container {
+    height: calc(100% - 47px);
+    padding-top: 15px !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+
+html[safe-area="true"] .holder.bottom-post:not(.full-post-section)  {
+    height: calc(43px + env(safe-area-inset-bottom)) !important;
+    height: calc(43px + constant(safe-area-inset-bottom)) !important;
+}
+html[safe-area="true"] .has-comment-box {
+    height: 100% !important;
+    padding-bottom: calc(39px + env(safe-area-inset-bottom)) !important;
+    padding-bottom: calc(39px + constant(safe-area-inset-bottom)) !important;
+}
+
+html[safe-area="true"] .full-post-section .full-post-box .media-section {
+    padding-bottom: env(safe-area-inset-bottom) !important;
+    padding-bottom: constant(safe-area-inset-bottom) !important;
+}
+
+html[safe-area="true"] .social-plugin .social-thread {
+    height: 100% !important;
+    display: flex;
+    flex-direction: column;
 }
\ No newline at end of file
diff --git a/widget/templates/thread.html b/widget/templates/thread.html
index 8d9ed9a..062dbb1 100644
--- a/widget/templates/thread.html
+++ b/widget/templates/thread.html
@@ -4,7 +4,7 @@
             <div class="padded head-btn text-center padding-bottom-ten">
                 <a ng-click="Thread.followUnfollow(Thread.getFollowingStatus())">{{Thread.getFollowingStatus()}}</a>
             </div>
-            <div style="height: calc(100% - 47px); padding-top: 15px !important; overflow-y: auto;overflow-x: hidden;">
+            <div class="thread-container">
                 <div class="social-item clearfix">
                     <hr class="small">
                     <div class="head row clearfix padding-left-ten padding-right-ten margin-bottom-fifteen">