Apply media queries on referenda (#8679)

packages/page-referenda/src/Referenda/Deposits/index.tsx

@@ -19,17 +19,19 @@ interface Props {
   className?: string;
   decision: PalletReferendaDeposit | null;
   id: BN;
+  noMedia?: boolean;
   palletReferenda: PalletReferenda;
   submit: PalletReferendaDeposit | null;
   track?: PalletReferendaTrackInfo;
 }
 
-function Deposits ({ canDeposit, canRefund, className = '', decision, id, palletReferenda, submit, track }: Props): React.ReactElement<Props> {
+function Deposits ({ canDeposit, canRefund, className = '', decision, id, noMedia, palletReferenda, submit, track }: Props): React.ReactElement<Props> {
   return (
-    <td className={`${className} address`}>
+    <td className={`${className} address ${noMedia ? '' : 'media--1000-noPad'}`}>
       {submit && (
         <AddressMini
           balance={submit.amount}
+          className={noMedia ? '' : 'media--1000'}
           value={submit.who}
           withBalance
         />
@@ -39,23 +41,28 @@ function Deposits ({ canDeposit, canRefund, className = '', decision, id, pallet
           <>
             <AddressMini
               balance={decision.amount}
+              className={noMedia ? '' : 'media--1000'}
               value={decision.who}
               withBalance
             />
             {canRefund && (
-              <Refund
-                id={id}
-                palletReferenda={palletReferenda}
-              />
+              <div className={noMedia ? '' : 'media--1000'}>
+                <Refund
+                  id={id}
+                  palletReferenda={palletReferenda}
+                />
+              </div>
             )}
           </>
         )
         : canDeposit && track && (
-          <Place
-            id={id}
-            palletReferenda={palletReferenda}
-            track={track}
-          />
+          <div className={noMedia ? '' : 'media--1000'}>
+            <Place
+              id={id}
+              palletReferenda={palletReferenda}
+              track={track}
+            />
+          </div>
         )
       }
     </td>

packages/page-referenda/src/Referenda/Group.tsx

@@ -45,7 +45,7 @@ function Group ({ activeIssuance, className, isMember, members, palletReferenda,
       ),
       isExpanded && trackInfo && (
         <tr>
-          <th colSpan={9} />
+          <th colSpan={8} />
         </tr>
       )
     ],
@@ -55,9 +55,8 @@ function Group ({ activeIssuance, className, isMember, members, palletReferenda,
   const [header, key] = useMemo(
     () => [
       [
-        [trackName ? <>{trackName}<div className='sub'>{trackInfo?.text}</div></> : t('referenda'), 'start', 5],
-        [undefined, 'number', 2],
-        [headerButton]
+        [trackName ? <>{trackName}<div className='sub'>{trackInfo?.text}</div></> : t('referenda'), 'start', 8],
+        null && [headerButton]
       ],
       trackName
         ? `track:${trackName}`

packages/page-referenda/src/Referenda/RefOngoing.tsx

@@ -124,7 +124,7 @@ function Ongoing ({ isMember, members, palletReferenda, palletVote, ranks, track
         palletVote={palletVote}
         tally={tally}
       />
-      <td className='middle chart'>
+      <td className='middle chart media--1300-noPad'>
         <Progress
           className='media--1300'
           total={tallyTotal}

packages/page-referenda/src/Referenda/RefTuple.tsx

@@ -57,6 +57,7 @@ function Tuple ({ palletReferenda, value: { id, info, track } }: Props): React.R
         canRefund
         decision={decision}
         id={id}
+        noMedia
         palletReferenda={palletReferenda}
         submit={submit}
         track={track}

packages/page-referenda/src/Referenda/Summary.tsx

@@ -51,7 +51,10 @@ function Summary ({ className, issuanceActive, issuanceInactive, issuanceTotal,
             </CardSummary>
           )}
           {issuanceInactive && (
-            <CardSummary label={t<string>('inactive issuance')}>
+            <CardSummary
+              className='media--1000'
+              label={t<string>('inactive issuance')}
+            >
               <FormatBalance
                 value={issuanceInactive}
                 withSi
@@ -59,7 +62,10 @@ function Summary ({ className, issuanceActive, issuanceInactive, issuanceTotal,
             </CardSummary>
           )}
           {issuanceActive && issuanceInactive && (
-            <CardSummary label={t<string>('active issuance')}>
+            <CardSummary
+              className='media--800'
+              label={t<string>('active issuance')}
+            >
               <FormatBalance
                 value={issuanceActive}
                 withSi

packages/page-referenda/src/Referenda/Votes.tsx

@@ -74,7 +74,7 @@ function Votes ({ className = '', id, isConvictionVote, palletVote, tally }: Pro
   );
 
   return (
-    <td className={`${className} expand`}>
+    <td className={`${className} expand media--1200-noPad`}>
       <Expander
         className='media--1200'
         renderChildren={ayes && renderAyes}

packages/page-referenda/src/Referenda/index.tsx

@@ -82,7 +82,7 @@ function Referenda ({ className, isConvictionVote, members, palletReferenda, pal
       />
       <Button.Group>
         <Dropdown
-          className='topDropdown'
+          className='topDropdown media--800'
           label={t<string>('selected track')}
           onChange={setTrackSelected}
           options={trackOpts}

packages/react-components/src/styles/media.ts

@@ -1,106 +1,20 @@
 // Copyright 2017-2023 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export default `
-  .media--2000 {
-    @media only screen and (max-width: 2000px) {
+export default [
+  '2000', '1900', '1800', '1700', '1600', '1500', '1400', '1300', '1200', '1100',
+  '1000', '900', '800', '700', '600', '500', '400'
+].map((size) => `
+  .media--${size} {
+    @media only screen and (max-width: ${size}px) {
       display: none !important;
     }
   }
 
-  .media--1900 {
-    @media only screen and (max-width: 1900px) {
-      display: none !important;
+  .media--${size}-noPad {
+    @media only screen and (max-width: ${size}px) {
+      min-width: 0 !important;
+      padding: 0 !important;
     }
   }
-
-  .media--1800 {
-    @media only screen and (max-width: 1800px) {
-      display: none !important;
-    }
-  }
-
-  .media--1700 {
-    @media only screen and (max-width: 1700px) {
-      display: none !important;
-    }
-  }
-
-  .media--1600 {
-    @media only screen and (max-width: 1600px) {
-      display: none !important;
-    }
-  }
-
-  .media--1500 {
-    @media only screen and (max-width: 1500px) {
-      display: none !important;
-    }
-  }
-
-  .media--1400 {
-    @media only screen and (max-width: 1400px) {
-      display: none !important;
-    }
-  }
-
-  .media--1300 {
-    @media only screen and (max-width: 1300px) {
-      display: none !important;
-    }
-  }
-
-  .media--1200 {
-    @media only screen and (max-width: 1200px) {
-      display: none !important;
-    }
-  }
-
-  .media--1100 {
-    @media only screen and (max-width: 1100px) {
-      display: none !important;
-    }
-  }
-
-  .media--1000 {
-    @media only screen and (max-width: 1000px) {
-      display: none !important;
-    }
-  }
-
-  .media--900 {
-    @media only screen and (max-width: 900px) {
-      display: none !important;
-    }
-  }
-
-  .media--800 {
-    @media only screen and (max-width: 800px) {
-      display: none !important;
-    }
-  }
-
-  .media--700 {
-    @media only screen and (max-width: 700px) {
-      display: none !important;
-    }
-  }
-
-  .media--600 {
-    @media only screen and (max-width: 600px) {
-      display: none !important;
-    }
-  }
-
-  .media--500 {
-    @media only screen and (max-width: 500px) {
-      display: none !important;
-    }
-  }
-
-  .media--400 {
-    @media only screen and (max-width: 400px) {
-      display: none !important;
-    }
-  }
-`;
+`).join('');