From a6225b9f6ab2ca5f37bfb7d449c64386ae2cea03 Mon Sep 17 00:00:00 2001
From: Eric <5089238+emizzle@users.noreply.github.com>
Date: Fri, 7 Jun 2024 12:57:30 +1000
Subject: [PATCH] set max height for requests table

---
 index.html                         |  2 +-
 src/App.vue                        | 12 +++++-------
 src/components/StorageRequest.vue  | 23 +++++++++++++----------
 src/components/StorageRequests.vue | 16 ++++++++++++----
 4 files changed, 31 insertions(+), 22 deletions(-)
diff --git a/index.html b/index.html
index 99f583a..4af18b5 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Codex Testnet</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 0d66845..d5ad247 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -155,16 +155,14 @@ onMounted(async () => {
     info alert - Slot
   </button>
   <div class="flex flex-col h-full min-w-96 bg-white dark:bg-gray-900">
-    <header class="w-full text-center border-b p-4">
+    <header class="w-full text-center border-b p-4 flex-none">
       <AppNav />
     </header>
-    <main>
-      <div class="mx-auto max-w-screen-xl">
-        <ContractEventAlerts v-model="alerts"></ContractEventAlerts>
-        <RouterView class="flex-auto p-4" />
-      </div>
+    <main class="flex-1 mx-auto max-w-screen-xl w-full p-4">
+      <ContractEventAlerts v-model="alerts"></ContractEventAlerts>
+      <RouterView />
     </main>
-    <footer class="w-full text-center border-t p-4 mt-4">
+    <footer class="w-full text-center border-t p-4 mt-4 flex-none">
       <Balance />
       <BlockNumber />
     </footer>
diff --git a/src/components/StorageRequest.vue b/src/components/StorageRequest.vue
index 3241969..c0fd0f4 100644
--- a/src/components/StorageRequest.vue
+++ b/src/components/StorageRequest.vue
@@ -25,17 +25,20 @@ const totalPrice = computed(() => price(props.request))
   <div class="flex">
     <CodexImage class="flex-2" :cid="request.content.cid"></CodexImage>
     <div class="py-8 px-4 mx-auto max-w-2xl lg:py-16">
-      <h2 class="mb-2 text-xl font-semibold leading-none text-gray-900 md:text-2xl dark:text-white">
-        {{ shortHex(requestId, 12) }}
-      </h2>
-      <p class="mb-4 text-xl font-extrabold leading-none text-gray-900 md:text-2xl dark:text-white">
-        {{ totalPrice }} CDX
+      <div class="flex justify-between items-center mb-2">
+        <h2 class="text-xl font-semibold leading-none text-gray-900 md:text-2xl dark:text-white">
+          Request {{ shortHex(requestId, 12) }}
+        </h2>
+        <StateIndicator
+          :text="request.state"
+          :color="getStateColour(request.state)"
+        ></StateIndicator>
+      </div>
+      <p class="mb-4 text-xl font-extrabold leading-none text-gray-900
+      md:text-2xl dark:text-white flex justify-between">
+        <div>{{ totalPrice }} CDX</div>
+
       </p>
-      <StateIndicator
-        class="mb-4"
-        :text="request.state"
-        :color="getStateColour(request.state)"
-      ></StateIndicator>
       <dl>
         <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Dataset CID</dt>
         <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
diff --git a/src/components/StorageRequests.vue b/src/components/StorageRequests.vue
index 3141457..2a5f706 100644
--- a/src/components/StorageRequests.vue
+++ b/src/components/StorageRequests.vue
@@ -15,9 +15,9 @@ const router = useRouter()
 </script>
 
 <template>
-  <div>
+  <div class="flex flex-1 flex-col h-auto">
     <div
-      class="flex items-center justify-between flex-column md:flex-row flex-wrap space-y-4 md:space-y-0 py-4 px-6 bg-white dark:bg-gray-900"
+      class="flex flex-initial items-center justify-between flex-column md:flex-row flex-wrap space-y-4 md:space-y-0 py-4 px-6 bg-white dark:bg-gray-900"
     >
       <div>
         <button
@@ -114,9 +114,11 @@ const router = useRouter()
       </div>
     </div>
     <div
-      class="relative overflow-x-auto overflow-y-auto max-h-screen shadow-md sm:rounded-lg border-t border-gray-50"
+      class="max-h-128 flex-1 overflow-x-auto overflow-y-auto shadow-md sm:rounded-lg border-t border-gray-50"
     >
-      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+      <table
+        class="w-full relative text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
+      >
         <thead
           class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
         >
@@ -169,3 +171,9 @@ const router = useRouter()
     </div>
   </div>
 </template>
+
+<style scoped>
+.max-h-128 {
+  max-height: 36rem;
+}
+</style>
