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>