messing with css a little

Author: foxfriends

web/src/common/table/index.js

@@ -1,7 +1,6 @@
-/*       */
 import * as React from "react";
 import { Grid } from "../grid";
 
 export function Table({ children }) {
-  return <Grid columns="2fr 2fr 1fr">{children}</Grid>;
+  return <Grid columns="auto 1fr auto">{children}</Grid>;
 }

web/src/common/table/row.css

@@ -2,6 +2,8 @@
 .value,
 .detail {
   padding: 16px;
+  min-width: 0;
+
   &.truncate {
     text-overflow: ellipsis;
     white-space: nowrap;

web/src/common/table/row.js

@@ -1,10 +1,8 @@
-/*       */
 import * as React from "react";
 import S from "./row.css";
 const { Fragment } = React;
 
 export class Row extends React.PureComponent {
-  // $FlowIgnore
   valueRef;
   titleRef;
 

web/src/content/settings/account-settings.js

@@ -27,12 +27,12 @@ export function AccountSettings({ email, name, verified }) {
     : l`Your email is not verified! (Click to resend verification email)`;
 
   const emailContent = (
-    <span className={S.nowrap}>
+    <div className={S.settingRow}>
       <Tooltip clickable={false} title={verificationTitle}>
         {emailIcon}
       </Tooltip>
       {email}
-    </span>
+    </div>
   );
 
   return (

web/src/content/settings/row.js

@@ -1,4 +1,3 @@
-/*       */
 import * as React from "react";
 import { Row as DefaultRow } from "../../common/table/row";
 import { l } from "../../localization";
@@ -9,8 +8,8 @@ export function Row({ title, value, onEdit }) {
   const editButton = (
     <Link onClick={onEdit} className={S.caps}>{l`Change`}</Link>
   );
-  const formattedValue = <span className={S.value}>{value || ""}</span>;
-  const formattedTitle = <span className={S.caps}>{title}</span>;
+  const formattedValue = <div className={S.value}>{value || ""}</div>;
+  const formattedTitle = <div className={S.caps}>{title}</div>;
 
   return (
     <DefaultRow

web/src/content/settings/settings.css

@@ -18,8 +18,13 @@
   font-size: 10pt;
 }
 
-.nowrap {
+.settingRow {
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .verificationStatus {