From 9b1d6b99763cf3449cf8e2d9b8705962228e08c2 Mon Sep 17 00:00:00 2001
From: wolfderechter <wolfderechter@gmail.com>
Date: Wed, 4 Jan 2023 15:59:22 +0100
Subject: [PATCH 1/3] fix(bridge-ui): transaction tab same width as bridge
 width

---
 packages/bridge-ui/src/pages/home/Home.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
index 36052cb92b7..4b5b6b891a1 100644
--- a/packages/bridge-ui/src/pages/home/Home.svelte
+++ b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -6,9 +6,10 @@
   import TaikoBanner from "../../components/TaikoBanner.svelte";
   import Transactions from "../../components/Transactions.svelte";
   let activeTab: string = "bridge";
+  let bridgeWidth;
 </script>
 
-<div class="container mx-auto max-w-fit text-center my-10">
+<div class="container mx-auto {activeTab === 'bridge' ? 'max-w-fit' : ''} text-center my-10" style="{activeTab === 'bridge' ? '' : 'width: '+bridgeWidth+'px;'}" bind:clientWidth={bridgeWidth}>
   <div class="rounded-3xl border-2 border-zinc-800 border-solid p-2 md:p-6">
     <div class="tabs mb-4">
       <span

From d0a63375664391b5000e9d85868db57a242aa196 Mon Sep 17 00:00:00 2001
From: wolfderechter <wolfderechter@gmail.com>
Date: Thu, 5 Jan 2023 14:23:09 +0100
Subject: [PATCH 2/3] fix(bridge-ui): transaction tab same min-height as bridge
 height

---
 packages/bridge-ui/src/pages/home/Home.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
index 4b5b6b891a1..75d9013cb73 100644
--- a/packages/bridge-ui/src/pages/home/Home.svelte
+++ b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -7,10 +7,11 @@
   import Transactions from "../../components/Transactions.svelte";
   let activeTab: string = "bridge";
   let bridgeWidth;
+  let bridgeHeight;
 </script>
 
-<div class="container mx-auto {activeTab === 'bridge' ? 'max-w-fit' : ''} text-center my-10" style="{activeTab === 'bridge' ? '' : 'width: '+bridgeWidth+'px;'}" bind:clientWidth={bridgeWidth}>
-  <div class="rounded-3xl border-2 border-zinc-800 border-solid p-2 md:p-6">
+<div class="container mx-auto {activeTab === 'bridge' ? 'max-w-fit' : ''} text-center my-10" style="{activeTab === 'bridge' ? '' : 'width: '+bridgeWidth+'px;'}" bind:clientWidth={bridgeWidth} bind:clientHeight={bridgeHeight}>
+  <div class="rounded-3xl border-2 border-zinc-800 border-solid p-2 md:p-6" style="{activeTab === 'bridge' ? '' : 'min-height: '+bridgeHeight+'px;'}">
     <div class="tabs mb-4">
       <span
         class="tab tab-bordered {activeTab === 'bridge' ? 'tab-active' : ''}"

From 9494f4c41a1bcfbf97374ebd5a39f9d464d9dcb0 Mon Sep 17 00:00:00 2001
From: wolfderechter <wolfderechter@gmail.com>
Date: Thu, 5 Jan 2023 15:54:45 +0100
Subject: [PATCH 3/3] fix(bridge-ui): change to min-width for populated data

---
 packages/bridge-ui/src/pages/home/Home.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
index 75d9013cb73..80e9ef9d965 100644
--- a/packages/bridge-ui/src/pages/home/Home.svelte
+++ b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -10,8 +10,8 @@
   let bridgeHeight;
 </script>
 
-<div class="container mx-auto {activeTab === 'bridge' ? 'max-w-fit' : ''} text-center my-10" style="{activeTab === 'bridge' ? '' : 'width: '+bridgeWidth+'px;'}" bind:clientWidth={bridgeWidth} bind:clientHeight={bridgeHeight}>
-  <div class="rounded-3xl border-2 border-zinc-800 border-solid p-2 md:p-6" style="{activeTab === 'bridge' ? '' : 'min-height: '+bridgeHeight+'px;'}">
+<div class="container mx-auto {activeTab === 'bridge' ? 'max-w-fit' : 'w-fit'} text-center my-10" style="{activeTab === 'bridge' ? '' : 'min-width: '+bridgeWidth+'px;'}" bind:clientWidth={bridgeWidth} bind:clientHeight={bridgeHeight}>
+  <div class="rounded-3xl border-2 border-zinc-800 border-solid p-2 md:p-6" style="{activeTab === 'bridge' && $transactions.length > 0 ? '' : 'min-height: '+bridgeHeight+'px;'}">
     <div class="tabs mb-4">
       <span
         class="tab tab-bordered {activeTab === 'bridge' ? 'tab-active' : ''}"