fix/ edit button gets wrapped

src/app/production/[id]/page.tsx

@@ -947,14 +947,14 @@ export default function ProductionConfiguration({ params }: PageProps) {
       </HeaderNavigation>
       <div className="flex h-[95%] flex-row">
         <div
-          className={`overflow-hidden transition-[min-width] w-0 min-w-0 ${
-            inventoryVisible ? 'min-w-[35%] ml-2 mt-2 max-h-[89vh]' : ''
+          className={`overflow-hidden transition-[min-width] w-0 ${
+            inventoryVisible ? 'min-w-fit ml-2 mt-2 max-h-[89vh]' : 'min-w-0'
           }`}
         >
           <SourceList
             sources={sources}
             action={addSourceAction}
-            actionText={t('inventory_list.add')}
+            actionText={'add'}
             onClose={() => setInventoryVisible(false)}
             isDisabledFunc={isDisabledFunction}
             locked={locked}
@@ -971,7 +971,11 @@ export default function ProductionConfiguration({ params }: PageProps) {
             />
           )}
         </div>
-        <div className="flex flex-col h-fit w-full">
+        <div
+          className={`flex flex-col h-fit mt-2 ${
+            inventoryVisible ? 'w-fit' : 'w-full'
+          }`}
+        >
           <div
             id="prevCameras"
             className="grid p-3 m-2 bg-container grow rounded grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 h-fit"

src/components/icons/Icons.tsx

@@ -1,7 +1,6 @@
 import {
   IconVideo,
   IconMicrophone2,
-  IconArrowRight,
   IconVideoOff,
   IconVector,
   IconVectorOff,
@@ -30,7 +29,9 @@ import {
   IconBiohazard,
   IconAlertTriangle,
   IconRouteOff,
-  IconAlertOctagon
+  IconAlertOctagon,
+  IconPencil,
+  IconPlus
 } from '@tabler/icons-react';
 
 interface IClassName {
@@ -54,9 +55,6 @@ const pickIcon = {
   IconVectorOff: ({ className }: IClassName) => (
     <IconVectorOff className={className} />
   ),
-  IconArrowRight: ({ className }: IClassName) => (
-    <IconArrowRight className={className} />
-  ),
   IconCopy: ({ className }: IClassName) => <IconCopy className={className} />,
   IconCopyOff: ({ className }: IClassName) => (
     <IconCopyOff className={className} />
@@ -119,7 +117,11 @@ const pickIcon = {
   ),
   IconAlertOctagon: ({ className }: IClassName) => (
     <IconAlertOctagon className={className} />
-  )
+  ),
+  IconPencil: ({ className }: IClassName) => (
+    <IconPencil className={className} />
+  ),
+  IconPlus: ({ className }: IClassName) => <IconPlus className={className} />
 };
 
 export type PickIconNames = keyof typeof pickIcon;

src/components/inventory/Inventory.tsx

@@ -98,7 +98,7 @@ export default function Inventory({ locked }: { locked: boolean }) {
         <SourceList
           sources={sources}
           action={editSource}
-          actionText={t('inventory_list.edit')}
+          actionText={'edit'}
           locked={locked}
         />
         {currentSource ? (

src/components/sourceList/SourceList.tsx

@@ -14,7 +14,7 @@ interface SourceListProps {
   onClose?: () => void;
   isDisabledFunc?: (source: SourceWithId) => boolean;
   action?: (source: SourceWithId) => void;
-  actionText?: string;
+  actionText: string;
   locked: boolean;
 }
 

src/components/sourceListItem/SourceListItem.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { SourceWithId } from '../../interfaces/Source';
 import videoSettings from '../../utils/videoSettings';
 import { getHertz } from '../../utils/stream';
@@ -14,7 +14,7 @@ import { SourceListItemThumbnail } from './SourceListItemThumbnail';
 type SourceListItemProps = {
   source: SourceWithId;
   action?: (source: SourceWithId) => void;
-  actionText?: string;
+  actionText: string;
   disabled: unknown;
   locked: boolean;
 };
@@ -28,31 +28,15 @@ function SourceListItem({
 }: SourceListItemProps) {
   const t = useTranslate();
 
-  const [previewVisible, setPreviewVisible] = useState<boolean>(false);
   const [outputRows, setOutputRows] = useState<
     { id: string; value: string }[][]
   >([]);
 
-  const timeoutRef = useRef<NodeJS.Timeout>();
-
   const { video_stream: videoStream, audio_stream: audioStream } = source;
   const { width, height, frame_rate: frameRate } = videoStream || {};
   const { sample_rate: sampleRate, number_of_channels: numberOfChannels = 0 } =
     audioStream || {};
 
-  useEffect(() => {
-    return () => clearTimeout(timeoutRef.current);
-  }, []);
-
-  const onMouseEnter = useCallback(() => {
-    timeoutRef.current = setTimeout(() => setPreviewVisible(true), 1000);
-  }, []);
-
-  const onMouseLeave = useCallback(() => {
-    setPreviewVisible(false);
-    clearTimeout(timeoutRef.current);
-  }, []);
-
   const style = { textWrap: 'wrap' } as React.CSSProperties;
 
   const channelsInArray: number[] = [];
@@ -148,31 +132,25 @@ function SourceListItem({
             ) : null}
           </div>
         </div>
-        <div className="flex justify-center items-center	">
-          <div className="relative w-full mr-4">
-            <button
-              className={`flex flex-row min-w-full items-center justify-center m-1 p-1 rounded-lg ${
-                disabled || (locked && actionText === t('inventory_list.add'))
-                  ? 'text-unclickable-text pointer-events-none'
-                  : 'text-brand hover:bg-zinc-500 pointer-events-auto'
-              } bg-zinc-600`}
-              onClick={() => (disabled || !action ? '' : action(source))}
-            >
-              <div
-                className={`flex items-center overflow-hidden mr-6 ${
-                  disabled ? 'text-unclickable-text' : 'text-brand'
-                } text-xs`}
-              >
-                {actionText}
-              </div>
-              <Icons
-                name="IconArrowRight"
-                className={`absolute ${
-                  disabled ? 'text-unclickable-text' : 'text-brand'
-                } right-2 w-4`}
-              />
-            </button>
-          </div>
+        <div className="flex justify-center items-center relative">
+          {actionText === 'edit' && (
+            <Icons
+              name="IconPencil"
+              className={`absolute ${
+                disabled ? 'text-unclickable-text' : 'text-brand'
+              } r
+              top-4 right-2 w-6`}
+            />
+          )}
+          {actionText === 'add' && (
+            <Icons
+              name="IconPlus"
+              className={`absolute ${
+                disabled ? 'text-unclickable-text' : 'text-brand'
+              } r
+              top-4 right-2 w-6`}
+            />
+          )}
         </div>
       </div>
     </li>

src/components/sourceListItem/SourceListItemThumbnail.tsx

@@ -37,7 +37,7 @@ export const SourceListItemThumbnail = (props: SourceThumbnailProps) => {
   };
 
   return (
-    <div className="w-60 min-h-full flex flex-col items-center justify-around">
+    <div className="w-40 min-h-full flex flex-col items-center justify-around">
       {/* TODO perhaps add alts to translations */}
       <ImageComponent
         src={getSourceThumbnail(source)}

src/i18n/locales/en.ts

@@ -554,8 +554,6 @@ export const en = {
     types: 'Type',
     locations: 'Location',
     active_sources: 'Active Sources',
-    add: 'Add',
-    edit: 'Edit',
     sort_by: 'Sort by',
     no_sorting_applied: 'No sorting selected',
     most_recent_connection: 'Most recent connection',

src/i18n/locales/sv.ts

@@ -556,8 +556,6 @@ export const sv = {
     types: 'Typ',
     locations: 'Plats',
     active_sources: 'Aktiva källor',
-    add: 'Lägg till',
-    edit: 'Redigera',
     sort_by: 'Sortera på',
     no_sorting_applied: 'Ingen sortering vald',
     most_recent_connection: 'Senast anslutning',