update ui

src/Flows.css

@@ -1,18 +1,56 @@
 .box {
-    background-color: #fff;
+    background-color: hsl(0,0%,95%);
     border-radius: 5px;
     margin: 1em 0;
     padding: .5em;
-    box-shadow: 0 5px 20px rgba(0,0,0,.4);
+    box-shadow: 0 5px 20px rgba(0,0,0,.5);
 }
 
-.flow-item {
-    flex: 0 0 600px;
+.left-container .flow-item {
+    display: inline-block;
+    width: 600px;
+    float: left;
 }
+
+.flow-reply-row {
+    display: inline-flex;
+    align-items: flex-start;
+    width: calc(100% - 625px);
+    margin-left: -25px;
+    padding-left: 20px;
+    overflow-x: hidden;
+}
+.flow-reply-row:empty {
+    margin: 0 !important;
+}
+
+.flow-item-row::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+@media screen and (max-width: 900px) {
+    .left-container .flow-item {
+        display: block;
+        width: calc(100vw - 20px);
+        max-width: 600px;
+        float: none;
+    }
+
+    .flow-reply-row {
+        display: flex;
+        width: calc(100% - 10px) !important;
+        margin-left: 10px;
+        padding-left: 20px;
+        margin-top: -2.5em;
+    }
+}
+
 .left-container .flow-reply {
     flex: 0 0 300px;
     max-height: 15em;
-    margin-left: -5px;
+    margin-right: -5px;
     overflow-y: hidden;
 }
 
@@ -32,6 +70,10 @@
     .aux-margin {
         width: calc(100% - 2 * 10px);
     }
+
+    .flow-reply-row {
+        width: calc(100% - 585px);
+    }
 }
 
 .left-container .flow-item-row {
@@ -42,22 +84,10 @@
     margin-left: -10px;
 }
 
-.left-container .flow-item-row {
-    display: flex;
-    overflow-x: hidden;
-    align-items: flex-start;
-}
-
 .flow-item-row img {
     max-width: 100%;
 }
 
-.flow-item-row pre {
-    white-space: pre-wrap;
-    font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
-    word-wrap: break-word;
-}
-
 .box-header-badge {
     float: right;
     margin: 0 .5em;