channels: prevent ellipsed amounts on smaller screen resolutions

Author: jamaljsr

app/src/components/base/grid.tsx

@@ -23,11 +23,13 @@ export const Row: React.FC<{
  */
 export const Column: React.FC<{
   cols?: number;
+  colsXl?: number;
   right?: boolean;
   className?: string;
-}> = ({ cols, right, children, className }) => {
-  const cn: string[] = [];
-  cn.push(cols ? `col-${cols}` : 'col');
+}> = ({ cols, colsXl, right, children, className }) => {
+  const cn: string[] = ['col'];
+  cols && cn.push(`col-${cols}`);
+  colsXl && cn.push(`col-xl-${colsXl}`);
   className && cn.push(className);
   right && cn.push('text-right');
   return <div className={cn.join(' ')}>{children}</div>;

app/src/components/loop/ChannelRow.tsx

@@ -36,13 +36,17 @@ const Styled = {
       }
     `}
   `,
-  Column: styled(Column)<{ last?: boolean }>`
+  Column: styled(Column)<{ last?: boolean; ellipse?: boolean }>`
     white-space: nowrap;
     line-height: ${ROW_HEIGHT}px;
-    overflow: hidden;
-    text-overflow: ellipsis;
     padding-left: 5px;
     padding-right: ${props => (props.last ? '15' : '5')}px;
+    ${props =>
+      props.ellipse &&
+      `
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `}
   `,
   StatusIcon: styled.span`
     float: left;
@@ -68,7 +72,7 @@ export const ChannelRowHeader: React.FC = () => {
       <Column right>
         <HeaderFour>{l('canReceive')}</HeaderFour>
       </Column>
-      <Column cols={3}></Column>
+      <Column cols={2} colsXl={3}></Column>
       <Column>
         <HeaderFour>{l('canSend')}</HeaderFour>
       </Column>
@@ -138,15 +142,15 @@ const ChannelRow: React.FC<Props> = ({ channel, style }) => {
         )}
         <Unit sats={channel.remoteBalance} suffix={false} />
       </Column>
-      <Column cols={3}>
+      <Column cols={2} colsXl={3}>
         <Balance channel={channel} />
       </Column>
       <Column>
         <Unit sats={channel.localBalance} suffix={false} />
       </Column>
       <Column cols={1}>{channel.remoteFeeRate}</Column>
       <Column cols={1}>{channel.uptimePercent}</Column>
-      <Column cols={2}>
+      <Column cols={2} ellipse>
         <Tip overlay={channel.remotePubkey} placement="left" capitalize={false}>
           <span>{channel.aliasLabel}</span>
         </Tip>