Adjust pin icon styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+catalog/catalog.module.css

@@ -20,13 +20,30 @@
  */
 
 .list :global(.TableRow) {
-  .pinIcon {
-    @apply ml-5 opacity-0 mt-[-1px];
-    transition: opacity 200ms;
+  .entityName {
+    position: relative;
+    width: min-content;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 24px;
+
+    .pinIcon {
+      position: absolute;
+      right: 0;
+      opacity: 0;
+      transition: none;
+
+      &:hover {
+        /* Drop styles defined for <Icon/> */
+        background-color: transparent;
+        box-shadow: none;
+      }
+    }
   }
 
   &:hover .pinIcon {
-    @apply opacity-100;
+    opacity: 1;
   }
 }
 

src/renderer/components/+catalog/catalog.tsx

@@ -189,13 +189,13 @@ export class Catalog extends React.Component<Props> {
 
   renderName(item: CatalogEntityItem<CatalogEntity>) {
     return (
-      <>
+      <div className={styles.entityName}>
         {item.name}
         <Icon className={styles.pinIcon} material="push_pin" small tooltip="Pin to Hotbar" onClick={(event) => {
           event.stopPropagation();
           this.addToHotbar(item);
         }}/>
-      </>
+      </div>
     );
   }