diff --git a/web/package.json b/web/package.json
index aa4586d..d39a29d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -12,6 +12,7 @@
     "@mui/joy": "5.0.0-alpha.84",
     "@reduxjs/toolkit": "^1.8.1",
     "axios": "^0.27.2",
+    "classnames": "^2.3.2",
     "copy-to-clipboard": "^3.3.2",
     "dayjs": "^1.11.3",
     "i18next": "^23.2.3",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 2614b6d..776a16d 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -20,6 +20,9 @@ dependencies:
   axios:
     specifier: ^0.27.2
     version: 0.27.2
+  classnames:
+    specifier: ^2.3.2
+    version: 2.3.2
   copy-to-clipboard:
     specifier: ^3.3.2
     version: 3.3.2
@@ -1263,6 +1266,10 @@ packages:
       fsevents: 2.3.2
     dev: false
 
+  /classnames@2.3.2:
+    resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
+    dev: false
+
   /clsx@1.2.1:
     resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
     engines: {node: '>=6'}
diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index afb86e1..937e44c 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -1,4 +1,5 @@
 import { Button, Divider, Input, Modal, ModalDialog, Radio, RadioGroup, Textarea } from "@mui/joy";
+import classnames from "classnames";
 import { isUndefined } from "lodash-es";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -227,14 +228,15 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
           <Divider className="text-gray-500">Optional</Divider>
           <div className="w-full flex flex-col justify-start items-start border rounded-md overflow-hidden my-3">
             <div
-              className={`w-full flex flex-row justify-between items-center px-2 py-1 cursor-pointer hover:bg-gray-100 ${
-                showDescriptionAndTag ? "bg-gray-100" : ""
-              }`}
+              className={classnames(
+                "w-full flex flex-row justify-between items-center px-2 py-1 cursor-pointer hover:bg-gray-100",
+                showDescriptionAndTag ? "bg-gray-100 border-b" : ""
+              )}
               onClick={() => setShowDescriptionAndTag(!showDescriptionAndTag)}
             >
               <span className="text-sm">Description and tags</span>
               <button className="w-7 h-7 p-1 rounded-md">
-                <Icon.ChevronDown className={`w-4 h-auto text-gray-500 ${showDescriptionAndTag ? "transform rotate-180" : ""}`} />
+                <Icon.ChevronDown className={classnames("w-4 h-auto text-gray-500", showDescriptionAndTag ? "transform rotate-180" : "")} />
               </button>
             </div>
             {showDescriptionAndTag && (
@@ -267,7 +269,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
           <div className="w-full flex flex-col justify-start items-start border rounded-md overflow-hidden">
             <div
               className={`w-full flex flex-row justify-between items-center px-2 py-1 cursor-pointer hover:bg-gray-100 ${
-                showOpenGraphMetadata ? "bg-gray-100" : ""
+                showOpenGraphMetadata ? "bg-gray-100 border-b" : ""
               }`}
               onClick={() => setShowOpenGraphMetadata(!showOpenGraphMetadata)}
             >
@@ -276,7 +278,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
                 <Icon.Sparkles className="ml-1 w-4 h-auto text-blue-600" />
               </span>
               <button className="w-7 h-7 p-1 rounded-md">
-                <Icon.ChevronDown className={`w-4 h-auto text-gray-500 ${showDescriptionAndTag ? "transform rotate-180" : ""}`} />
+                <Icon.ChevronDown className={classnames("w-4 h-auto text-gray-500", showOpenGraphMetadata ? "transform rotate-180" : "")} />
               </button>
             </div>
             {showOpenGraphMetadata && (
diff --git a/web/src/components/ShortcutView.tsx b/web/src/components/ShortcutView.tsx
index 3b27b89..97fc05f 100644
--- a/web/src/components/ShortcutView.tsx
+++ b/web/src/components/ShortcutView.tsx
@@ -149,7 +149,7 @@ const ShortcutView = (props: Props) => {
           <Tooltip title="Creator" variant="solid" placement="top" arrow>
             <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
               <Icon.User className="w-4 h-auto mr-1" />
-              {shortcut.creator.nickname}
+              <span className="max-w-[4rem] sm:max-w-[6rem] truncate">{shortcut.creator.nickname}</span>
             </div>
           </Tooltip>
           <Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>