chore: update shortcuts display

frontend/extension/package.json

@@ -1,7 +1,7 @@
 {
   "name": "slash-extension",
   "displayName": "Slash",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "An open source, self-hosted bookmarks and link sharing platform. Save and share your links very easily.",
   "scripts": {
     "dev": "plasmo dev",

frontend/extension/src/components/ShortcutView.tsx

@@ -22,7 +22,7 @@ const ShortcutView = (props: Props) => {
     <>
       <div
         className={classNames(
-          "group w-full px-3 py-2 flex flex-col justify-start items-start border rounded-lg hover:bg-gray-100 hover:shadow dark:border-zinc-800 dark:hover:bg-zinc-800"
+          "group w-auto px-3 py-2 flex flex-col justify-start items-start border rounded-lg hover:bg-gray-100 hover:shadow dark:border-zinc-800 dark:hover:bg-zinc-800"
         )}
       >
         <div className="w-full flex flex-row justify-start items-center">
@@ -51,7 +51,7 @@ const ShortcutView = (props: Props) => {
                     </>
                   )}
                 </div>
-                <span className="hidden group-hover:block ml-1 cursor-pointer shrink-0">
+                <span className="ml-1 cursor-pointer shrink-0 opacity-80">
                   <Icon.ExternalLink className="w-4 h-auto text-gray-600" />
                 </span>
               </button>

frontend/extension/src/components/ShortcutsContainer.tsx

@@ -14,7 +14,7 @@ const ShortcutsContainer = () => {
           <span className="mx-1 text-sm">Please make sure you have signed in your instance.</span>
         </a>
       </div>
-      <div className={classNames("w-full grid grid-cols-2 gap-2")}>
+      <div className={classNames("w-full flex flex-row justify-start items-start flex-wrap gap-2")}>
         {shortcuts.map((shortcut) => {
           return <ShortcutView key={shortcut.id} shortcut={shortcut} />;
         })}