From 86a82fe25e264c2f4ee239af61c87cd6855a338d Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Fri, 5 Apr 2024 14:50:55 -0300
Subject: [PATCH] Set width based on address length

---
 src/js/components/ErrorRenderer.tsx    |  3 +--
 src/js/components/ResponseRenderer.tsx | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/js/components/ErrorRenderer.tsx b/src/js/components/ErrorRenderer.tsx
index af9116d..6f2de60 100644
--- a/src/js/components/ErrorRenderer.tsx
+++ b/src/js/components/ErrorRenderer.tsx
@@ -4,8 +4,7 @@ export function ErrorRenderer({ error }: { error: Error }) {
   const t = chrome.i18n.getMessage;
   return (
     <div data-testid="error" className="w-full h-48">
-      <div className="flex flex-col h-5/6 justify-center w-3/4 m-auto">
-      </div>
+      <div className="flex flex-col h-5/6 justify-center w-3/4 m-auto"></div>
       <footer className="flex items-center justify-center h-10">
         <span className="font-bold">{t("error")}</span>: {error.message}
       </footer>
diff --git a/src/js/components/ResponseRenderer.tsx b/src/js/components/ResponseRenderer.tsx
index fc9c541..c7e74db 100644
--- a/src/js/components/ResponseRenderer.tsx
+++ b/src/js/components/ResponseRenderer.tsx
@@ -1,9 +1,25 @@
-import React, { ReactNode } from "react";
+import React, { useEffect, ReactNode } from "react";
 import { TResponse } from "~/lib/response";
 type TFunction = typeof chrome.i18n.getMessage;
 
 export function ResponseRenderer({ response }: { response: TResponse }) {
   const t = chrome.i18n.getMessage;
+
+  useEffect(() => {
+    const { body } = document;
+    const width = (() => {
+      const addr = response.IPAddress;
+      if (addr.length >= 30) {
+        return 525;
+      } else if (addr.length >= 20) {
+        return 450;
+      } else {
+        return 400;
+      }
+    })();
+    body.style.width = `${width}px`;
+  }, [response]);
+
   return (
     <div className="w-full h-48">
       <div className="flex flex-col h-5/6 justify-center w-3/4 m-auto" data-testid="response">