fix sandbox width (#125)

Co-authored-by: mrval <[email protected]>

package.json

@@ -19,7 +19,7 @@
     "@web3-react/walletconnect-connector": "^6.2.13",
     "@web3-react/walletlink-connector": "^6.2.13",
     "@zer0-os/zos-component-library": "0.8.0",
-    "@zer0-os/zos-feed": "1.18.1",
+    "@zer0-os/zos-feed": "^1.19.0",
     "@zer0-os/zos-zns": "2.2.0",
     "classnames": "^2.3.1",
     "es6-promise-debounce": "^1.0.1",

src/_variables.scss

@@ -1,12 +1,12 @@
 $left-content-space: 32px;
 $width-application-navigation: 220px;
 $width-application-content: 736px;
-$width-world-navigation: calc((100vw - $width-application-content - $left-content-space) / 2);
+$width-world-navigation: calc((100vw - $width-application-content) / 2);
 $width-collapsed-navigation: calc(56px + 54px + 32px);
 $min-flex-width: calc($width-application-content + ($width-collapsed-navigation * 2));
 $width-sidekick: calc((100vw - $width-application-content) / 2);
 $height-main: 65px;
-
+$width-app-sandbox: calc(100vw - $width-sidekick - $width-world-navigation);
 $width-screen-medium: 1440px;
 $width-screen-large: 1600px;
 $width-screen-xl: 1602px;

src/index.scss

@@ -41,9 +41,8 @@ BUTTON {
 
   .app-sandbox {
     position: relative;
-    width: auto;
-    min-width: $width-application-content;
-    left: 51px;
+    max-width: 800px;
+    width: $width-app-sandbox;
 
     @include for-static-layout() {
       position: absolute;

src/main.scss

@@ -5,6 +5,7 @@
 
 .main {
   display: flex;
+  justify-content: space-between;
   position: fixed;
   width: 100%;
   height: 100vh;
@@ -15,12 +16,15 @@
   pointer-events: none;
 
   &__navigation {
+    box-sizing: border-box;
     display: flex;
     pointer-events: auto;
 
-    flex: 0 0 $width-world-navigation;
+    width: $width-world-navigation;
 
-    margin-right: $left-content-space;
+    padding-right: $left-content-space;
+    position: relative;
+    top: 10px;
 
     @include for-screen-large() {
       justify-content: space-between;
@@ -60,9 +64,10 @@
 
   &__sidekick {
     padding: 12px 16px 0 0;
+    box-sizing: border-box;
 
     pointer-events: auto;
-    flex-basis: $width-sidekick;
+    width: $width-sidekick;
 
     display: flex;
     justify-content: flex-end;

src/platform-apps/channels/styles.scss

@@ -32,6 +32,11 @@
       border-left: 3px solid #fb216e;
     }
   }
+
+  &-view {
+    margin-left: 20px;
+    margin-top: 20px;
+  }
 }
 
 .message {