improve privacy page tab height display

Jwyman328 · Nov 30, 2024 · d08e124 · d08e124
1 parent a70de2d
commit d08e124
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/src/app/components/TransactionDetailsModal.tsx b/src/app/components/TransactionDetailsModal.tsx
@@ -79,7 +79,7 @@ export const TransactionDetailsModal = ({
             transitionDuration={300}
             transitionTimingFunction="linear"
           >
-            <div className="flex flex-row justify-between w-3/4 mt-8">
+            <div className="flex flex-row justify-between w-3/4 mt-8 ml-auto mr-auto">
               <div className="flex flex-col border-t-2 border-gray-900 border-r-2 border-b-2 p-2 h-40 max-h-40 overflow-y-scroll w-60 items-center bg-blue-300 justify-center">
                 {transactionDetails.inputs.map((input) => (
                   <BitcoinAddress splitCount={6} address={input.address} />

diff --git a/src/app/pages/Home.tsx b/src/app/pages/Home.tsx
@@ -485,7 +485,7 @@ function Home() {
         </div>
       </SettingsSlideout>
 
-      <header className="border-2 border-gray-200 border-l-0 border-r-0 mb-4 h-16">
+      <header className="border-2 border-gray-200 border-l-0 border-r-0 mb-0 h-[8vh] ">
         <Container size="xl" className="flex justify-between items-center h-16">
           <CurrentFeeRates />
           <SegmentedControl
@@ -525,11 +525,11 @@ function Home() {
         </Container>
       </header>
 
-      <div className="flex flex-row justify-evenly"></div>
+      <div className="flex flex-row justify-evenly h-[92vh]"></div>
       {displayType === DisplayType.PRIVACY ? (
         <Privacy btcMetric={btcMetric} />
       ) : (
-        <div className="mx-4 flex flex-col items-center overflow-x-scroll">
+        <div className="mx-4 flex flex-col items-center overflow-x-scroll mt-4">
           <div
             className={`flex flex-row w-full justify-around`}
             style={maxToggleContainerWidth}

diff --git a/src/app/pages/Privacy.tsx b/src/app/pages/Privacy.tsx
@@ -20,34 +20,38 @@ export const Privacy = ({ btcMetric }: PrivacyProps) => {
   const transactionsResponse = useGetTransactions();
   const outputs = useGetOutputs();
   return (
-    <div>
+    <div style={{ height: '93.5vh' }}>
       <Tabs
         variant="default"
         orientation="vertical"
         defaultValue={PrivacyTabs.UTXOS_STXOS}
+        style={{ height: '100%' }}
       >
-        <Tabs.List>
+        <Tabs.List grow>
           <Tabs.Tab
-            className="h-40"
+            className="h-1/2"
             value={PrivacyTabs.UTXOS_STXOS}
             leftSection={<IconCoins style={iconStyle} />}
           >
             <div>UTXOS</div> <div> STXOS</div>
           </Tabs.Tab>
           <Tabs.Tab
-            className="h-40"
+            className="h-1/2"
             value={PrivacyTabs.TRANSACTIONS}
             leftSection={<IconArrowsDownUp style={iconStyle} />}
           >
             Transactions
           </Tabs.Tab>
+          {/*
+            // TODO add this back in once the preview feature is complete
           <Tabs.Tab
             className="h-40"
             value={PrivacyTabs.PREVIEW}
             leftSection={<IconEye style={iconStyle} />}
           >
             Preview
           </Tabs.Tab>
+          */}
         </Tabs.List>
 
         <Tabs.Panel value={PrivacyTabs.UTXOS_STXOS}>