ui fix

src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte

@@ -17,7 +17,7 @@
   import { GridComponent, TooltipComponent } from "echarts/components";
   import { CanvasRenderer } from "echarts/renderers";
   import FinancialTable from "$lib/components/FinancialTable.svelte";
-
+  import Infobox from "$lib/components/Infobox.svelte";
   use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
   export let data;
@@ -390,6 +390,37 @@
       }
     }
   }
+
+
+  function generateStatementInfoHTML() {
+  if ($coolMode) {
+    const statementText = statementConfig?.find(
+      (item) => item?.propertyName === displayStatement
+    )?.text;
+
+    return `<span>${statementText || ''}</span>`;
+  } else if (cashFlow?.length > 0) {
+    return `
+      <span>
+       Get detailed ratio statement breakdowns, uncovering price to free cash flow ratio, price per earnings, and much more.
+      </span>
+    `;
+  } else {
+    return `
+      <span>
+        No financial data available for ${$displayCompanyName}.
+      </span>
+    `;
+  }
+}
+
+let htmlOutput = null;
+$: {
+  if($coolMode || displayStatement) {
+    htmlOutput = generateStatementInfoHTML()
+
+  }
+}
 </script>
 
 <svelte:head>
@@ -451,30 +482,7 @@
           </div>
 
           <div class="grid grid-cols-1 gap-2 w-full">
-            <div
+           <Infobox text={htmlOutput} />
-              class="w-full text-white p-3 sm:p-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
-            >
-              <svg
-                class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 256 256"
-                ><path
-                  fill="#fff"
-                  d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-                /></svg
-              >
-
-              {#if $coolMode}
-                {statementConfig?.find(
-                  (item) => item?.propertyName === displayStatement,
-                )?.text}
-              {:else if cashFlow?.length > 0}
-                Get detailed ratio statement breakdowns, uncovering price to
-                free cash flow ratio, price per earnings, and much more.
-              {:else}
-                No financial data available for {$displayCompanyName}
-              {/if}
-            </div>
             {#if cashFlow?.length > 0}
               <div
                 class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
@@ -556,7 +564,7 @@
                 </label>
 
                 <div
-                  class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto sm:ml-auto"
+                  class="flex flex-row items-center w-fit  sm:ml-auto"
                 >
                   <div class="relative inline-block text-left grow">
                     <DropdownMenu.Root>
@@ -613,7 +621,7 @@
                   </div>
                   <Button
                     on:click={() => exportFundamentalData("csv")}
-                    class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                    class="ml-2 w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
                   >
                     <span class="truncate text-white">Download</span>
                     <svg

src/routes/stocks/[tickerID]/financials/ratios/+page.svelte

@@ -16,6 +16,7 @@
   import { LineChart, BarChart } from "echarts/charts";
   import { GridComponent, TooltipComponent } from "echarts/components";
   import { CanvasRenderer } from "echarts/renderers";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
@@ -347,6 +348,37 @@
       }
     }
   }
+
+
+  function generateStatementInfoHTML() {
+  if ($coolMode) {
+    const statementText = statementConfig?.find(
+      (item) => item?.propertyName === displayStatement
+    )?.text;
+
+    return `<span>${statementText || ''}</span>`;
+  } else if (ratios?.length > 0) {
+    return `
+      <span>
+        Discover comprehensive ratio statement breakdowns that reveal insights into revenue, expenses, and beyond.
+      </span>
+    `;
+  } else {
+    return `
+      <span>
+        No financial data available for ${$displayCompanyName}.
+      </span>
+    `;
+  }
+}
+
+let htmlOutput = null;
+$: {
+  if($coolMode || displayStatement) {
+    htmlOutput = generateStatementInfoHTML()
+
+  }
+}
 </script>
 
 <svelte:head>
@@ -409,30 +441,7 @@
           </div>
 
           <div class="grid grid-cols-1 gap-2">
-            <div
+           <Infobox text={htmlOutput}  />
-              class="text-white p-3 sm:p-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
-            >
-              <svg
-                class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 256 256"
-                ><path
-                  fill="#fff"
-                  d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-                /></svg
-              >
-
-              {#if $coolMode}
-                {statementConfig?.find(
-                  (item) => item?.propertyName === displayStatement,
-                )?.text}
-              {:else if ratios?.length > 0}
-                Get detailed income statement breakdowns, uncovering revenue,
-                expenses, and much more.
-              {:else}
-                No financial data available for {$displayCompanyName}
-              {/if}
-            </div>
             {#if ratios?.length > 0}
               <div
                 class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
@@ -514,7 +523,7 @@
                 </label>
 
                 <div
-                  class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto sm:ml-auto"
+                  class="flex flex-row items-center w-fit sm:ml-auto"
                 >
                   <div class="relative inline-block text-left grow">
                     <DropdownMenu.Root>
@@ -571,7 +580,7 @@
                   </div>
                   <Button
                     on:click={() => exportFundamentalData("csv")}
-                    class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                    class="ml-2 w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
                   >
                     <span class="truncate text-white">Download</span>
                     <svg