console: Fix icon squares

TheThingsNetwork · Dec 30, 2024 · 1e13b9b · 1e13b9b
1 parent 182fe66
commit 1e13b9b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/pkg/webui/console/containers/shortcut-panel/shortcut-item/index.js b/pkg/webui/console/containers/shortcut-panel/shortcut-item/index.js
@@ -28,15 +28,21 @@ import style from './shortcut-item.styl'
 const ShortcutItem = ({ icon, link, action, title, className, mobile }) =>
   action ? (
     <Tooltip content={<Message content={title} />} delay={0}>
-      <button onClick={action} className={classnames(style.shortcut, className)}>
-        <Icon icon={icon} className={style.icon} size={28} />
+      <button
+        onClick={action}
+        className={classnames(style.shortcut, className, { [style.shortcutPanel]: !mobile })}
+      >
+        <Icon icon={icon} className={style.icon} size={25} />
         {mobile && <Message content={title} className="lg-xl:d-none" />}
       </button>
     </Tooltip>
   ) : (
     <Tooltip content={<Message content={title} />} delay={0}>
-      <Link to={link} className={classnames(style.shortcut, className)}>
-        <Icon icon={icon} className={style.icon} size={28} />
+      <Link
+        to={link}
+        className={classnames(style.shortcut, className, { [style.shortcutPanel]: !mobile })}
+      >
+        <Icon icon={icon} className={style.icon} size={25} />
         {mobile && <Message content={title} className="lg-xl:d-none" />}
       </Link>
     </Tooltip>

diff --git a/pkg/webui/console/containers/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/console/containers/shortcut-panel/shortcut-item/shortcut-item.styl
@@ -35,3 +35,8 @@
   &:hover
     cursor: pointer
     background-color: var(--c-bg-brand-semilight)
+
+  &-panel
+    height: unset
+    aspect-ratio: 1 / 1
+    box-sizing: border-box