Fixed styling a little bit

deusprogrammer · Nov 6, 2023 · 0b6785b · 0b6785b
1 parent a77b0dc
commit 0b6785b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/src/renderer/App.css b/src/renderer/App.css
@@ -283,7 +283,7 @@ button.selected {
 .clip-table {
     display: grid;
     grid-template-columns: repeat(auto-fit, 10%);
-    align-items: end;
+    align-items: start;
     gap: 10px;
 }
 
@@ -296,6 +296,7 @@ button.selected {
 
 .clip-table img {
     width: 100%;
+    height: 100%;
     object-fit: contain;
 }
 

diff --git a/src/renderer/components/ClipTable.jsx b/src/renderer/components/ClipTable.jsx
@@ -161,25 +161,37 @@ export default ({
                                         opFn(collectionId, video._id);
                                     }}
                                 >
-                                    <div className={opClass}>
+                                    <div
+                                        className={opClass}
+                                        style={{ height: '10vh' }}
+                                    >
                                         <img
                                             src={`game://${game}/${video._id}.jpg`}
                                         />
                                     </div>
                                 </div>
                             </div>
-                            {renaming !== video._id ? (
-                                <div>{video._id.replace(/_/g, ' ')}</div>
-                            ) : (
-                                <div>
-                                    <input
-                                        value={newTitle}
-                                        onChange={({ target: { value } }) => {
-                                            setNewTitle(value);
-                                        }}
-                                    />
-                                </div>
-                            )}
+                            <div
+                                style={{
+                                    height: '50px',
+                                    overflow: 'clip',
+                                }}
+                            >
+                                {renaming !== video._id ? (
+                                    <div>{video._id.replace(/_/g, ' ')}</div>
+                                ) : (
+                                    <div>
+                                        <input
+                                            value={newTitle}
+                                            onChange={({
+                                                target: { value },
+                                            }) => {
+                                                setNewTitle(value);
+                                            }}
+                                        />
+                                    </div>
+                                )}
+                            </div>
                             <div>
                                 {includeRename ? (
                                     <>