Fix: make proxy list justify (#3)

src/components/Card/style.scss

@@ -2,7 +2,7 @@
 
 .card {
     padding: 15px;
-    box-shadow: 0 0 20px rgba($color-primary-dark, 0.2);
+    box-shadow: 2px 5px 20px -3px rgba($color-primary-dark, 0.18);
     background-color: $color-white;
     border-radius: 4px;
 }

src/containers/Proxies/components/Proxy/style.scss

@@ -2,14 +2,14 @@
 
 .proxy-item {
     position: relative;
-    padding: 10px;
+    width: 100%;
     height: 110px;
-    width: 110px;
+    padding: 10px;
     border-radius: 4px;
     background: $color-white;
     user-select: none;
     cursor: default;
-    box-shadow: 0 0 20px rgba($color-primary-dark, 0.2);
+    box-shadow: 2px 5px 20px -3px rgba($color-primary-dark, 0.2);
     transition: all 300ms ease;
 
     .proxy-type {
@@ -23,8 +23,9 @@
         max-height: 30px;
         margin-top: 10px;
         color: $color-primary-darken;
-        font-size: 12px;
+        font-size: 10px;
         overflow: hidden;
+        word-break: break-all;
     }
 
     .proxy-delay {
@@ -47,7 +48,7 @@
     }
 
     &:hover {
-        box-shadow: 0 10px 20px rgba($color-primary-darken, 0.4);
+        box-shadow: 0 14px 20px -4px rgba($color-primary-darken, 0.4);
 
         .proxy-editor {
             opacity: 1;

src/containers/Proxies/style.scss

@@ -1,18 +1,55 @@
 @import '~@styles/variables';
 
 .proxies-list {
-    margin: 10px 0;
+    --item-width: calc(100% / (var(--columns) + 1));
+    --gap: calc(var(--item-width) / var(--columns));
+
     display: flex;
+    margin-right: calc(-1 * var(--gap));
+    padding-bottom: 100px;
     flex-wrap: wrap;
+    align-content: flex-start;
     list-style: none;
+    height: 2000px;
 
-    li {
+    @include response(xxl) {
-        margin: 8px 0;
+        --columns: 12;
-        margin-right: 15px;
+    }
 
-        &:nth-child(6n) {
+    @include response(xl) {
-            margin-right: 0;
+        --columns: 10;
-        }
+    }
+
+    @include response(lg) {
+        --columns: 8;
+    }
+
+    @include response(md) {
+        --columns: 7;
+    }
+
+    @include response(sm) {
+        --columns: 6;
+    }
+
+    @include response(xs) {
+        --columns: 5;
+    }
+
+    @include response(xxs) {
+        --columns: 4;
+    }
+
+    @include response(tiny) {
+        --columns: 3;
+    }
+
+    > li {
+        display: inline-block;
+        width: var(--item-width);
+        margin-right: var(--gap);
+        flex-shrink: 0;
+        margin-bottom: 10px;
     }
 }
 

src/styles/common.scss

@@ -19,6 +19,17 @@ body {
     margin: 0;
     padding: 0;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+    ::-webkit-scrollbar {
+        z-index: 11;
+        width: 5px;
+        background: transparent;
+
+        &-thumb {
+            border-radius: 5px;
+            background: #2c8af8;
+        }
+    }
 }
 
 .app {
@@ -33,6 +44,7 @@ body {
 .page-container {
     width: 100%;
     height: 100vh;
+    padding-left: 10px;
     overflow-y: scroll;
 }
 
@@ -42,7 +54,6 @@ body {
     padding-bottom: 30px;
     width: 100%;
     height: 100vh;
-    max-width: 1200px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;

src/styles/variables.scss

@@ -20,3 +20,51 @@ $color-orange: #e6a23c;
 $color-red: #f56c6c;
 $color-black-light: #546b87;
 $color-black: #000;
+
+// response break point
+@mixin response($name) {
+    @if map-has-key($breakpoints, $name) {
+        @media #{inspect(map-get($breakpoints, $name))} {
+            @content;
+        }
+    }
+}
+
+$breakpoints: (
+    'tiny': (
+        max-width: 680px
+    ),
+    'xxs': (
+        max-width: 760px
+    ),
+    'xs': (
+        max-width: 860px
+    ),
+    'sm': (
+        max-width: 960px
+    ),
+    'md': (
+        min-width: 961px
+    )
+    and
+    (
+        max-width: 1340px
+    ),
+    'lg': (
+        min-width: 1341px
+    )
+    and
+    (
+        max-width: 1600px
+    ),
+    'xl': (
+        min-width: 1601px
+    )
+    and
+    (
+        max-width: 2000px
+    ),
+    'xxl': (
+        min-width: 2001px
+    )
+);