bug fix + ui improvements

components/Modal/Link/AddOrEditLink.tsx

@@ -124,23 +124,23 @@ export default function AddOrEditLink({
         </p>
       ) : null}
 
+      {method === "CREATE" ? (
+        <div>
+          <p className="text-sm text-sky-700 mb-2 font-bold">
+            Address (URL)
+            <RequiredBadge />
+          </p>
+          <input
+            value={link.url}
+            onChange={(e) => setLink({ ...link, url: e.target.value })}
+            type="text"
+            placeholder="e.g. http://example.com/"
+            className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+          />
+        </div>
+      ) : null}
+      <hr />
       <div className="grid sm:grid-cols-2 gap-3">
-        {method === "CREATE" ? (
-          <div className="sm:col-span-2">
-            <p className="text-sm text-sky-700 mb-2">
-              URL
-              <RequiredBadge />
-            </p>
-            <input
-              value={link.url}
-              onChange={(e) => setLink({ ...link, url: e.target.value })}
-              type="text"
-              placeholder="e.g. http://example.com/"
-              className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
-            />
-          </div>
-        ) : null}
-
         <div>
           <p className="text-sm text-sky-700 mb-2">Collection</p>
           <CollectionSelection

components/Modal/Link/LinkDetails.tsx

@@ -150,7 +150,7 @@ export default function LinkDetails({ link }: Props) {
             }}
           />
         )}
-        <div className="flex flex-col gap- justify-end drop-shadow">
+        <div className="flex flex-col min-h-[3rem] justify-end drop-shadow">
           <p className="text-2xl text-sky-700 capitalize break-words hyphens-auto">
             {link.name}
           </p>

lib/api/archive.ts

@@ -7,12 +7,12 @@ export default async function archive(
   collectionId: number,
   linkId: number
 ) {
-  const browser = await chromium.launch();
+  const browser = await chromium.launch({ headless: false });
   const context = await browser.newContext(devices["Desktop Chrome"]);
   const page = await context.newPage();
 
   try {
-    await page.goto(url, { waitUntil: "domcontentloaded", timeout: 300000 });
+    await page.goto(url, { waitUntil: "domcontentloaded" });
 
     await autoScroll(page);
 
@@ -53,7 +53,13 @@ export default async function archive(
 
 const autoScroll = async (page: Page) => {
   await page.evaluate(async () => {
-    await new Promise<void>((resolve, reject) => {
+    const timeoutPromise = new Promise<void>((_, reject) => {
+      setTimeout(() => {
+        reject(new Error("Auto scroll took too long (more than 10 seconds)."));
+      }, 20000);
+    });
+
+    const scrollingPromise = new Promise<void>((resolve) => {
       let totalHeight = 0;
       let distance = 100;
       let scrollDown = setInterval(() => {
@@ -68,6 +74,6 @@ const autoScroll = async (page: Page) => {
       }, 100);
     });
 
-    await new Promise((r) => setTimeout(r, 2000));
+    await Promise.race([scrollingPromise, timeoutPromise]);
   });
 };