From 093fadaf74de23a84f6eecf610dcc0e5fdde4b18 Mon Sep 17 00:00:00 2001
From: Oleg Sinizin <oleg.sinizin@onlyoffice.com>
Date: Thu, 26 Aug 2021 20:09:32 +0300
Subject: [PATCH] update layout for ie11

---
 .../csharp-mvc/Content/media.css              | 24 ++++++++++++-------
 .../csharp-mvc/Content/stylesheet.css         |  9 +++----
 .../csharp/App_Themes/media.css               | 24 ++++++++++++-------
 .../csharp/App_Themes/stylesheet.css          |  9 +++----
 .../java/src/main/webapp/css/media.css        | 24 ++++++++++++-------
 .../java/src/main/webapp/css/stylesheet.css   |  9 +++----
 .../nodejs/public/stylesheets/media-wopi.css  |  3 ++-
 .../nodejs/public/stylesheets/media.css       | 24 ++++++++++++-------
 .../nodejs/public/stylesheets/stylesheet.css  |  9 +++----
 web/documentserver-example/php/css/media.css  | 24 ++++++++++++-------
 .../php/css/stylesheet.css                    |  9 +++----
 .../python/static/css/media.css               | 24 ++++++++++++-------
 .../python/static/css/stylesheet.css          |  9 +++----
 .../ruby/app/assets/stylesheets/media.css     | 24 ++++++++++++-------
 .../app/assets/stylesheets/stylesheet.scss    |  9 +++----
 15 files changed, 149 insertions(+), 85 deletions(-)

diff --git a/web/documentserver-example/csharp-mvc/Content/media.css b/web/documentserver-example/csharp-mvc/Content/media.css
index 4260e83c..1c5b6165 100644
--- a/web/documentserver-example/csharp-mvc/Content/media.css
+++ b/web/documentserver-example/csharp-mvc/Content/media.css
@@ -25,7 +25,7 @@
 
     .tableHeaderCellViewers {
         width: 29%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
@@ -208,7 +208,7 @@
     }
 
     .tableHeaderCellViewers {
-        text-align: end;
+        text-align: right;
         width: 37%;
     }
 
@@ -218,6 +218,12 @@
     }
 }
 
+@media (max-width: 1080px) and (min-width: 890px) {
+    .firstContentCellViewers {
+        margin-left: auto;
+    }
+}
+
 @media (max-width: 986px) and (min-width: 890px) {
     .tableHeader {
         width: 75%;
@@ -225,7 +231,7 @@
 
     .tableHeaderCellEditors {
         width: 26%;
-        text-align: start;
+        text-align: left;
     }
 
     .tableHeaderCellFileName {
@@ -234,7 +240,7 @@
 
     .tableHeaderCellViewers {
         width: 27%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
@@ -286,13 +292,13 @@
 
     .tableHeaderCellViewers {
         width: 22%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
         padding-right: 4px;
         width: 20%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellFileName {
@@ -300,7 +306,7 @@
     }
 
     .tableHeaderCellEditors {
-        text-align: start;
+        text-align: left;
         width: 31%;
     }
 
@@ -371,6 +377,8 @@
     }
 
     .copy {
+        width: 100%;
+        text-align: center;
         margin: 0;
     }
 
@@ -499,7 +507,7 @@
 
     .firstContentCellShift {
         margin-left: 1px;
-        flex-basis: 15%;
+        flex-basis: 14%;
     }
 
     .tableRow td:last-child {
diff --git a/web/documentserver-example/csharp-mvc/Content/stylesheet.css b/web/documentserver-example/csharp-mvc/Content/stylesheet.css
index f0702098..288e94be 100644
--- a/web/documentserver-example/csharp-mvc/Content/stylesheet.css
+++ b/web/documentserver-example/csharp-mvc/Content/stylesheet.css
@@ -373,11 +373,12 @@ footer table tr {
     align-items: center;
     align-content: center;
     flex-wrap: wrap;
-    width: 100%;
+    width: 100vw;
     height: 64px;
 }
 
 footer table td {
+	display: block;
     position:relative;
     padding-left: 32px;
 }
@@ -558,6 +559,7 @@ footer table tr td:first-child {
 }
 
 .contentCells {
+	display: block;
     border-bottom: 1px solid #EFEFEF;
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
@@ -587,8 +589,7 @@ footer table tr td:first-child {
 
 .info {
     cursor: pointer;
-    padding: 3px 5px;
-    position: absolute;
+    margin: -2px 5px;
 }
 
 .tooltip {
@@ -755,6 +756,6 @@ html {
 }
 
 .firstContentCellViewers {
-    margin-left: auto;
+    margin-left: 0;
 }
 
diff --git a/web/documentserver-example/csharp/App_Themes/media.css b/web/documentserver-example/csharp/App_Themes/media.css
index 4260e83c..1c5b6165 100644
--- a/web/documentserver-example/csharp/App_Themes/media.css
+++ b/web/documentserver-example/csharp/App_Themes/media.css
@@ -25,7 +25,7 @@
 
     .tableHeaderCellViewers {
         width: 29%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
@@ -208,7 +208,7 @@
     }
 
     .tableHeaderCellViewers {
-        text-align: end;
+        text-align: right;
         width: 37%;
     }
 
@@ -218,6 +218,12 @@
     }
 }
 
+@media (max-width: 1080px) and (min-width: 890px) {
+    .firstContentCellViewers {
+        margin-left: auto;
+    }
+}
+
 @media (max-width: 986px) and (min-width: 890px) {
     .tableHeader {
         width: 75%;
@@ -225,7 +231,7 @@
 
     .tableHeaderCellEditors {
         width: 26%;
-        text-align: start;
+        text-align: left;
     }
 
     .tableHeaderCellFileName {
@@ -234,7 +240,7 @@
 
     .tableHeaderCellViewers {
         width: 27%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
@@ -286,13 +292,13 @@
 
     .tableHeaderCellViewers {
         width: 22%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
         padding-right: 4px;
         width: 20%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellFileName {
@@ -300,7 +306,7 @@
     }
 
     .tableHeaderCellEditors {
-        text-align: start;
+        text-align: left;
         width: 31%;
     }
 
@@ -371,6 +377,8 @@
     }
 
     .copy {
+        width: 100%;
+        text-align: center;
         margin: 0;
     }
 
@@ -499,7 +507,7 @@
 
     .firstContentCellShift {
         margin-left: 1px;
-        flex-basis: 15%;
+        flex-basis: 14%;
     }
 
     .tableRow td:last-child {
diff --git a/web/documentserver-example/csharp/App_Themes/stylesheet.css b/web/documentserver-example/csharp/App_Themes/stylesheet.css
index 60169b2f..05c99e59 100644
--- a/web/documentserver-example/csharp/App_Themes/stylesheet.css
+++ b/web/documentserver-example/csharp/App_Themes/stylesheet.css
@@ -375,11 +375,12 @@ footer table tr {
             align-items: center;
             align-content: center;
             flex-wrap: wrap;
-            width: 100%;
+            width: 100vw;
             height: 64px;
 }
 
 footer table td {
+	display: block;
             position: relative;
             padding-left: 32px;
 }
@@ -562,6 +563,7 @@ footer a:hover {
 }
 
 .contentCells {
+	display: block;
     border-bottom: 1px solid #EFEFEF;
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
@@ -591,8 +593,7 @@ footer a:hover {
 
 .info {
     cursor: pointer;
-    padding: 3px 5px;
-    position: absolute;
+    margin: -2px 5px;
 }
 
 .tooltip {
@@ -760,5 +761,5 @@ html {
 }
 
 .firstContentCellViewers {
-    margin-left: auto;
+    margin-left: 0;
 }
diff --git a/web/documentserver-example/java/src/main/webapp/css/media.css b/web/documentserver-example/java/src/main/webapp/css/media.css
index 4260e83c..1c5b6165 100644
--- a/web/documentserver-example/java/src/main/webapp/css/media.css
+++ b/web/documentserver-example/java/src/main/webapp/css/media.css
@@ -25,7 +25,7 @@
 
     .tableHeaderCellViewers {
         width: 29%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
@@ -208,7 +208,7 @@
     }
 
     .tableHeaderCellViewers {
-        text-align: end;
+        text-align: right;
         width: 37%;
     }
 
@@ -218,6 +218,12 @@
     }
 }
 
+@media (max-width: 1080px) and (min-width: 890px) {
+    .firstContentCellViewers {
+        margin-left: auto;
+    }
+}
+
 @media (max-width: 986px) and (min-width: 890px) {
     .tableHeader {
         width: 75%;
@@ -225,7 +231,7 @@
 
     .tableHeaderCellEditors {
         width: 26%;
-        text-align: start;
+        text-align: left;
     }
 
     .tableHeaderCellFileName {
@@ -234,7 +240,7 @@
 
     .tableHeaderCellViewers {
         width: 27%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
@@ -286,13 +292,13 @@
 
     .tableHeaderCellViewers {
         width: 22%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
         padding-right: 4px;
         width: 20%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellFileName {
@@ -300,7 +306,7 @@
     }
 
     .tableHeaderCellEditors {
-        text-align: start;
+        text-align: left;
         width: 31%;
     }
 
@@ -371,6 +377,8 @@
     }
 
     .copy {
+        width: 100%;
+        text-align: center;
         margin: 0;
     }
 
@@ -499,7 +507,7 @@
 
     .firstContentCellShift {
         margin-left: 1px;
-        flex-basis: 15%;
+        flex-basis: 14%;
     }
 
     .tableRow td:last-child {
diff --git a/web/documentserver-example/java/src/main/webapp/css/stylesheet.css b/web/documentserver-example/java/src/main/webapp/css/stylesheet.css
index 16db84cd..2a322ccd 100644
--- a/web/documentserver-example/java/src/main/webapp/css/stylesheet.css
+++ b/web/documentserver-example/java/src/main/webapp/css/stylesheet.css
@@ -375,11 +375,12 @@ footer table tr {
     align-items: center;
     align-content: center;
     flex-wrap: wrap;
-    width: 100%;
+    width: 100vw;
     height: 64px;
 }
 
 footer table td {
+	display: block;
     position: relative;
     padding-left: 32px;
 }
@@ -561,6 +562,7 @@ footer table tr td:first-child {
 }
 
 .contentCells {
+	display: block;
     border-bottom: 1px solid #e5e5e5;
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
@@ -590,8 +592,7 @@ footer table tr td:first-child {
 
 .info{
     cursor: pointer;
-    padding: 3px 5px;
-    position: absolute;
+    margin: -2px 5px;
 }
 
 .tooltip {
@@ -763,5 +764,5 @@ html {
 }
 
 .firstContentCellViewers {
-    margin-left: auto;
+    margin-left: 0;
 }
diff --git a/web/documentserver-example/nodejs/public/stylesheets/media-wopi.css b/web/documentserver-example/nodejs/public/stylesheets/media-wopi.css
index 1ea5d298..fcbc744d 100644
--- a/web/documentserver-example/nodejs/public/stylesheets/media-wopi.css
+++ b/web/documentserver-example/nodejs/public/stylesheets/media-wopi.css
@@ -69,7 +69,7 @@
         border: none;
     }
     .tableRow td:last-child:after{
-        width: 90%;
+        width: 95%;
     }
 }
 @media (max-width: 593px){
@@ -77,6 +77,7 @@
         width: 100%;
     }
     .tableRow td:last-child:after{
+        width: 90%;
         top: 67px;
         height: 1%;
     }
diff --git a/web/documentserver-example/nodejs/public/stylesheets/media.css b/web/documentserver-example/nodejs/public/stylesheets/media.css
index 89b4eca1..070d9df0 100644
--- a/web/documentserver-example/nodejs/public/stylesheets/media.css
+++ b/web/documentserver-example/nodejs/public/stylesheets/media.css
@@ -25,7 +25,7 @@
 
     .tableHeaderCellViewers {
         width: 29%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
@@ -208,7 +208,7 @@
     }
 
     .tableHeaderCellViewers {
-        text-align: end;
+        text-align: right;
         width: 37%;
     }
 
@@ -218,6 +218,12 @@
     }
 }
 
+@media (max-width: 1080px) and (min-width: 890px) {
+    .firstContentCellViewers {
+        margin-left: auto;
+    }
+}
+
 @media (max-width: 986px) and (min-width: 890px) {
     .tableHeader {
         width: 75%;
@@ -225,7 +231,7 @@
 
     .tableHeaderCellEditors {
         width: 26%;
-        text-align: start;
+        text-align: left;
     }
 
     .tableHeaderCellFileName {
@@ -234,7 +240,7 @@
 
     .tableHeaderCellViewers {
         width: 27%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
@@ -286,13 +292,13 @@
 
     .tableHeaderCellViewers {
         width: 22%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
         padding-right: 4px;
         width: 20%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellFileName {
@@ -300,7 +306,7 @@
     }
 
     .tableHeaderCellEditors {
-        text-align: start;
+        text-align: left;
         width: 31%;
     }
 
@@ -371,6 +377,8 @@
     }
 
     .copy {
+        width: 100%;
+        text-align: center;
         margin: 0;
     }
 
@@ -499,7 +507,7 @@
 
     .firstContentCellShift {
         margin-left: 1px;
-        flex-basis: 15%;
+        flex-basis: 14%;
     }
 
     .tableRow td:last-child {
diff --git a/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css b/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css
index 1dd4cea4..ba92e609 100644
--- a/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css
+++ b/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css
@@ -381,11 +381,12 @@ footer table tr {
     align-items: center;
     align-content: center;
     flex-wrap: wrap;
-    width: 100%;
+    width: 100vw;
     height: 64px;
 }
 
 footer table td {
+    display: block;
     position: relative;
     padding-left: 32px;
 }
@@ -566,6 +567,7 @@ footer table tr td:first-child {
 }
 
 .contentCells {
+    display: block;
     border-bottom: 1px solid #EFEFEF;
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
@@ -604,8 +606,7 @@ footer table tr td:first-child {
 
 .info{
     cursor: pointer;
-    padding: 3px 5px;
-    position: absolute;
+    margin: -2px 5px;
 }
 
 .tooltip {
@@ -773,7 +774,7 @@ html {
 }
 
 .firstContentCellViewers {
-    margin-left: auto;
+    margin-left: 0;
 }
 .tableHeaderCellDownload{
     padding-right: 28px;
diff --git a/web/documentserver-example/php/css/media.css b/web/documentserver-example/php/css/media.css
index 4260e83c..1c5b6165 100644
--- a/web/documentserver-example/php/css/media.css
+++ b/web/documentserver-example/php/css/media.css
@@ -25,7 +25,7 @@
 
     .tableHeaderCellViewers {
         width: 29%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
@@ -208,7 +208,7 @@
     }
 
     .tableHeaderCellViewers {
-        text-align: end;
+        text-align: right;
         width: 37%;
     }
 
@@ -218,6 +218,12 @@
     }
 }
 
+@media (max-width: 1080px) and (min-width: 890px) {
+    .firstContentCellViewers {
+        margin-left: auto;
+    }
+}
+
 @media (max-width: 986px) and (min-width: 890px) {
     .tableHeader {
         width: 75%;
@@ -225,7 +231,7 @@
 
     .tableHeaderCellEditors {
         width: 26%;
-        text-align: start;
+        text-align: left;
     }
 
     .tableHeaderCellFileName {
@@ -234,7 +240,7 @@
 
     .tableHeaderCellViewers {
         width: 27%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
@@ -286,13 +292,13 @@
 
     .tableHeaderCellViewers {
         width: 22%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
         padding-right: 4px;
         width: 20%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellFileName {
@@ -300,7 +306,7 @@
     }
 
     .tableHeaderCellEditors {
-        text-align: start;
+        text-align: left;
         width: 31%;
     }
 
@@ -371,6 +377,8 @@
     }
 
     .copy {
+        width: 100%;
+        text-align: center;
         margin: 0;
     }
 
@@ -499,7 +507,7 @@
 
     .firstContentCellShift {
         margin-left: 1px;
-        flex-basis: 15%;
+        flex-basis: 14%;
     }
 
     .tableRow td:last-child {
diff --git a/web/documentserver-example/php/css/stylesheet.css b/web/documentserver-example/php/css/stylesheet.css
index 264974bf..a64106fc 100644
--- a/web/documentserver-example/php/css/stylesheet.css
+++ b/web/documentserver-example/php/css/stylesheet.css
@@ -373,11 +373,12 @@ footer table tr {
     align-items: center;
     align-content: center;
     flex-wrap: wrap;
-    width: 100%;
+    width: 100vw;
     height: 64px;
 }
 
 footer table td {
+	display: block;
     position: relative;
     padding-left: 32px;
 }
@@ -559,6 +560,7 @@ footer table tr td:first-child {
 }
 
 .contentCells {
+	display: block;
     border-bottom: 1px solid #EFEFEF;
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
@@ -588,8 +590,7 @@ footer table tr td:first-child {
 
 .info{
     cursor: pointer;
-    padding: 3px 5px;
-    position: absolute;
+    margin: -2px 5px;
 }
 
 .tooltip {
@@ -756,5 +757,5 @@ html {
 }
 
 .firstContentCellViewers {
-    margin-left: auto;
+    margin-left: 0;
 }
diff --git a/web/documentserver-example/python/static/css/media.css b/web/documentserver-example/python/static/css/media.css
index 4260e83c..1c5b6165 100644
--- a/web/documentserver-example/python/static/css/media.css
+++ b/web/documentserver-example/python/static/css/media.css
@@ -25,7 +25,7 @@
 
     .tableHeaderCellViewers {
         width: 29%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
@@ -208,7 +208,7 @@
     }
 
     .tableHeaderCellViewers {
-        text-align: end;
+        text-align: right;
         width: 37%;
     }
 
@@ -218,6 +218,12 @@
     }
 }
 
+@media (max-width: 1080px) and (min-width: 890px) {
+    .firstContentCellViewers {
+        margin-left: auto;
+    }
+}
+
 @media (max-width: 986px) and (min-width: 890px) {
     .tableHeader {
         width: 75%;
@@ -225,7 +231,7 @@
 
     .tableHeaderCellEditors {
         width: 26%;
-        text-align: start;
+        text-align: left;
     }
 
     .tableHeaderCellFileName {
@@ -234,7 +240,7 @@
 
     .tableHeaderCellViewers {
         width: 27%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
@@ -286,13 +292,13 @@
 
     .tableHeaderCellViewers {
         width: 22%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
         padding-right: 4px;
         width: 20%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellFileName {
@@ -300,7 +306,7 @@
     }
 
     .tableHeaderCellEditors {
-        text-align: start;
+        text-align: left;
         width: 31%;
     }
 
@@ -371,6 +377,8 @@
     }
 
     .copy {
+        width: 100%;
+        text-align: center;
         margin: 0;
     }
 
@@ -499,7 +507,7 @@
 
     .firstContentCellShift {
         margin-left: 1px;
-        flex-basis: 15%;
+        flex-basis: 14%;
     }
 
     .tableRow td:last-child {
diff --git a/web/documentserver-example/python/static/css/stylesheet.css b/web/documentserver-example/python/static/css/stylesheet.css
index ddc938c9..071874ed 100644
--- a/web/documentserver-example/python/static/css/stylesheet.css
+++ b/web/documentserver-example/python/static/css/stylesheet.css
@@ -382,11 +382,12 @@ footer table tr {
     align-items: center;
     align-content: center;
     flex-wrap: wrap;
-    width: 100%;
+    width: 100vw;
     height: 64px;
 }
 
 footer table td {
+	display: block;
     position: relative;
     padding-left: 32px;
 }
@@ -568,6 +569,7 @@ footer table tr td:first-child {
 }
 
 .contentCells {
+	display: block;
     border-bottom: 1px solid #EFEFEF;
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
@@ -597,8 +599,7 @@ footer table tr td:first-child {
 
 .info{
     cursor: pointer;
-    padding: 3px 5px;
-    position: absolute;
+    margin: -2px 5px;
 }
 
 .tooltip {
@@ -766,5 +767,5 @@ html {
 }
 
 .firstContentCellViewers {
-    margin-left: auto;
+    margin-left: 0;
 }
diff --git a/web/documentserver-example/ruby/app/assets/stylesheets/media.css b/web/documentserver-example/ruby/app/assets/stylesheets/media.css
index 4260e83c..1c5b6165 100644
--- a/web/documentserver-example/ruby/app/assets/stylesheets/media.css
+++ b/web/documentserver-example/ruby/app/assets/stylesheets/media.css
@@ -25,7 +25,7 @@
 
     .tableHeaderCellViewers {
         width: 29%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
@@ -208,7 +208,7 @@
     }
 
     .tableHeaderCellViewers {
-        text-align: end;
+        text-align: right;
         width: 37%;
     }
 
@@ -218,6 +218,12 @@
     }
 }
 
+@media (max-width: 1080px) and (min-width: 890px) {
+    .firstContentCellViewers {
+        margin-left: auto;
+    }
+}
+
 @media (max-width: 986px) and (min-width: 890px) {
     .tableHeader {
         width: 75%;
@@ -225,7 +231,7 @@
 
     .tableHeaderCellEditors {
         width: 26%;
-        text-align: start;
+        text-align: left;
     }
 
     .tableHeaderCellFileName {
@@ -234,7 +240,7 @@
 
     .tableHeaderCellViewers {
         width: 27%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
@@ -286,13 +292,13 @@
 
     .tableHeaderCellViewers {
         width: 22%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellDownload {
         padding-right: 4px;
         width: 20%;
-        text-align: end;
+        text-align: right;
     }
 
     .tableHeaderCellFileName {
@@ -300,7 +306,7 @@
     }
 
     .tableHeaderCellEditors {
-        text-align: start;
+        text-align: left;
         width: 31%;
     }
 
@@ -371,6 +377,8 @@
     }
 
     .copy {
+        width: 100%;
+        text-align: center;
         margin: 0;
     }
 
@@ -499,7 +507,7 @@
 
     .firstContentCellShift {
         margin-left: 1px;
-        flex-basis: 15%;
+        flex-basis: 14%;
     }
 
     .tableRow td:last-child {
diff --git a/web/documentserver-example/ruby/app/assets/stylesheets/stylesheet.scss b/web/documentserver-example/ruby/app/assets/stylesheets/stylesheet.scss
index 983d7f0b..07bae2b7 100644
--- a/web/documentserver-example/ruby/app/assets/stylesheets/stylesheet.scss
+++ b/web/documentserver-example/ruby/app/assets/stylesheets/stylesheet.scss
@@ -374,11 +374,12 @@ footer table tr {
     align-items: center;
     align-content: center;
     flex-wrap: wrap;
-    width: 100%;
+    width: 100vw;
     height: 64px;
 }
 
 footer table td {
+	display: block;
     position: relative;
     padding-left: 32px;
 }
@@ -560,6 +561,7 @@ footer table tr td:first-child {
 }
 
 .contentCells {
+	display: block;
     border-bottom: 1px solid #EFEFEF;
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
@@ -589,8 +591,7 @@ footer table tr td:first-child {
 
 .info{
     cursor: pointer;
-    padding: 3px 5px;
-    position: absolute;
+    margin: -2px 5px;
 }
 
 .tooltip {
@@ -758,5 +759,5 @@ html {
 }
 
 .firstContentCellViewers {
-    margin-left: auto;
+    margin-left: 0;
 }