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

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
-          children={List([
-            <RiFolderSharedFill
-              size="3rem"
-              className="purple0-font margin-r-m"
-            />,
-            <span>{dirPath}</span>,
+        <div>
+          <div className="info">{dirPath}</div>
 
+          <div className="op">
             <button
               onClick={() => {
                 this.deleteSharing(dirPath);
               }}
             >
               {this.props.msg.pkg.get("browser.delete")}
-            </button>,
-          ])}
-          childrenStyles={List([
-            { flex: "0 0 auto", alignItems: "center" },
-            { alignItems: "center", justifyContent: "flex-start" },
-            {
-              flex: "0 0 auto",
-              alignItems: "center",
-              justifyContent: "flex-end",
-            },
-          ])}
-        />
+            </button>
+          </div>
+        </div>
       );
 
       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
-            children={List([
-              <RiUploadCloudLine
-                size="3rem"
-                id="icon-upload"
-                className="margin-r-m blue0-font"
-              />,
+          <div className={`font-s info`}>
+            <span className="title">{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>
 
-              <div className={`font-s`}>
-                <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>,
+          <div className="op">{op}</div>
 
-              op,
-            ])}
-            childrenStyles={List([
-              { flex: "0 0 auto" },
-              {},
-              { justifyContent: "flex-end" },
-            ])}
-          />
           {progressBar}
           {errorInfo}
         </div>