fix(fe): text overflows when it is too long

public/static/css/white.css

@@ -230,9 +230,27 @@
   padding: 0 1rem;
 }
 
+.theme-default #upload-list .info {
+  display: inline-block;
+  width: 70%;
+}
+
+.theme-default #upload-list .op {
+  display: inline-block;
+  width: 30%;
+  text-align: right;
+}
+
+.theme-default #upload-list .title {
+  font-size: 1.4rem;
+  line-height: 4rem;
+  overflow-wrap: break-word;
+}
+
 .theme-default #upload-list .desc {
   font-size: 1.2rem;
-  line-height: 2rem;
+  line-height: 4rem;
+  overflow-wrap: break-word;
 }
 
 .theme-default #upload-list .progress-grey {
@@ -258,6 +276,18 @@
   background-color: #2c3e50;
 }
 
+.theme-default #sharing-list .info {
+  display: inline-block;
+  width: 70%;
+  overflow-wrap: break-word;
+}
+
+.theme-default #sharing-list .op {
+  display: inline-block;
+  width: 30%;
+  text-align: right;
+}
+
 .theme-default #sharing-list .desc {
   background-color: #ecf0f1;
   font-size: 1.2rem;
@@ -265,6 +295,7 @@
   color: #697384;
   padding: 1rem;
   border: dashed 1px #95a5a6;
+  overflow-wrap: break-word;
 }
 
 .theme-default .sharing-item {

src/client/web/src/components/panel_sharings.tsx

@@ -64,32 +64,19 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
       }?dir=${encodeURIComponent(dirPath)}`;
 
       const row1 = (
-        <Flexbox
+        <div>
-          children={List([
+          <div className="info">{dirPath}</div>
-            <RiFolderSharedFill
-              size="3rem"
-              className="purple0-font margin-r-m"
-            />,
-            <span>{dirPath}</span>,
 
+          <div className="op">
             <button
               onClick={() => {
                 this.deleteSharing(dirPath);
               }}
             >
               {this.props.msg.pkg.get("browser.delete")}
-            </button>,
+            </button>
-          ])}
+          </div>
-          childrenStyles={List([
+        </div>
-            { flex: "0 0 auto", alignItems: "center" },
-            { alignItems: "center", justifyContent: "flex-start" },
-            {
-              flex: "0 0 auto",
-              alignItems: "center",
-              justifyContent: "flex-end",
-            },
-          ])}
-        />
       );
 
       const elem = (

src/client/web/src/components/panel_uploadings.tsx

@@ -102,35 +102,21 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
 
       const elem = (
         <div key={uploading.filePath} className="upload-item">
-          <Flexbox
+          <div className={`font-s info`}>
-            children={List([
+            <span className="title">{fileName}&nbsp;</span>
-              <RiUploadCloudLine
+            <span className="desc grey0-font">
-                size="3rem"
+              {FileSize(uploading.uploaded, { round: 0 })}
-                id="icon-upload"
+              &nbsp;/&nbsp;
-                className="margin-r-m blue0-font"
+              {FileSize(uploading.size, {
-              />,
+                round: 0,
+              })}
+              &nbsp;/&nbsp;
+              {`${progress}%`}
+            </span>
+          </div>
 
-              <div className={`font-s`}>
+          <div className="op">{op}</div>
-                <span className="">{fileName}&nbsp;</span>
-                <span className="desc grey0-font">
-                  {FileSize(uploading.uploaded, { round: 0 })}
-                  &nbsp;/&nbsp;
-                  {FileSize(uploading.size, {
-                    round: 0,
-                  })}
-                  &nbsp;/&nbsp;
-                  {`${progress}%`}
-                </span>
-              </div>,
 
-              op,
-            ])}
-            childrenStyles={List([
-              { flex: "0 0 auto" },
-              {},
-              { justifyContent: "flex-end" },
-            ])}
-          />
           {progressBar}
           {errorInfo}
         </div>