fix flip tracking item dropdown

Coflnet · Jan 21, 2025 · a31dfd3 · a31dfd3
1 parent 941d458
commit a31dfd3
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 22 deletions.
diff --git a/components/FlipTracking/FlipTracking.tsx b/components/FlipTracking/FlipTracking.tsx
@@ -247,6 +247,7 @@ export function FlipTracking(props: Props) {
                     allowShowLess
                     initialHeight={60}
                     onShowChange={show => setIsFilterExpanded(show)}
+                    containerStyle={{ overflow: 'visible' }}
                     content={
                         <div style={{ display: 'flex', gap: 10, flexDirection: 'column', paddingBottom: 20 }}>
                             <div className={styles.filterContainer}>
@@ -307,23 +308,19 @@ export function FlipTracking(props: Props) {
                             <div className={styles.filterContainer}>
                                 <label style={{ minWidth: '100px' }}>Item:</label>
                                 <div className={styles.itemFilterContainer} style={{ position: 'relative', height: '38px' }}>
-                                    <div style={{ position: 'absolute' }}>
-                                        <div style={isFilterExpanded ? { position: 'fixed' } : undefined}>
-                                            <ApiSearchField
-                                                multiple={false}
-                                                defaultSelected={item ? [item] : undefined}
-                                                className={styles.multiSearch}
-                                                onChange={items => {
-                                                    if (!items || items.length === 0) {
-                                                        setItem(undefined)
-                                                    } else {
-                                                        setItem(items[0])
-                                                    }
-                                                }}
-                                                searchFunction={api.itemSearch}
-                                            />
-                                        </div>
-                                    </div>
+                                    <ApiSearchField
+                                        multiple={false}
+                                        defaultSelected={item ? [item] : undefined}
+                                        className={styles.multiSearch}
+                                        onChange={items => {
+                                            if (!items || items.length === 0) {
+                                                setItem(undefined)
+                                            } else {
+                                                setItem(items[0])
+                                            }
+                                        }}
+                                        searchFunction={api.itemSearch}
+                                    />
                                 </div>
                             </div>
                         </div>
@@ -348,8 +345,8 @@ export function FlipTracking(props: Props) {
                         <DatePicker
                             className={'form-control'}
                             onChange={e => {
-                                setRangeEndDate(e?? new Date())
-                                loadFlipsForTimespan(rangeStartDate, e?? new Date())
+                                setRangeEndDate(e ?? new Date())
+                                loadFlipsForTimespan(rangeStartDate, e ?? new Date())
                             }}
                             minDate={new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 2)}
                             maxDate={new Date()}

diff --git a/components/FlipTracking/FlipTrackingListItem.tsx b/components/FlipTracking/FlipTrackingListItem.tsx
@@ -145,8 +145,8 @@ export function FlipTrackingListItem(props: Props) {
                             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                 <Table>
                                     <tbody>
-                                        {props.trackedFlip.propertyChanges.map(change => (
-                                            <tr>
+                                        {props.trackedFlip.propertyChanges.map((change, i) => (
+                                            <tr key={props.trackedFlip.uId + '-' + i}>
                                                 <td>{change.description}</td>
                                                 <td>
                                                     {change.effect > 0 ? (

diff --git a/components/ShowMoreText/ShowMoreText.tsx b/components/ShowMoreText/ShowMoreText.tsx
@@ -7,6 +7,7 @@ interface Props {
     alwaysShowAll?: boolean
     allowShowLess?: boolean
     onShowChange?: (isExpanded: boolean) => void
+    containerStyle?: React.CSSProperties
 }
 
 const ShowMoreText = (props: Props) => {
@@ -22,7 +23,10 @@ const ShowMoreText = (props: Props) => {
     }
 
     return (
-        <div className={`${styles.textContainer} ${isExpanded ? styles.expanded : ''}`} style={{ height: isExpanded ? 'auto' : props.initialHeight }}>
+        <div
+            className={`${styles.textContainer} ${isExpanded ? styles.expanded : ''}`}
+            style={{ height: isExpanded ? 'auto' : props.initialHeight, ...props.containerStyle }}
+        >
             {props.content}
             <div className={styles.showMoreContainer} onClick={toggleExpand}>
                 <span className={styles.showMoreText}>