Merge pull request #568 from rickxz/style(downloads)/improve-responsi…

…ve-design style(downloads): make game actions buttons the same size in smaller devices and crop repack title
hydralauncher · Jun 4, 2024 · c7ae4db · c7ae4db
2 parents 4ea04b3 + 76fc992
commit c7ae4db
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/renderer/src/pages/downloads/downloads.css.ts b/src/renderer/src/pages/downloads/downloads.css.ts
@@ -21,6 +21,11 @@ export const downloadTitle = style({
   },
 });
 
+export const repackTitle = style({
+  maxHeight: "40px",
+  overflow: "hidden",
+});
+
 export const downloaderName = style({
   color: "#c0c1c7",
   fontSize: "10px",
@@ -112,14 +117,16 @@ export const downloadDetails = style({
 
 export const downloadRightContent = style({
   display: "flex",
+  alignItems: "center",
   padding: `${SPACING_UNIT * 2}px`,
   flex: "1",
   gap: `${SPACING_UNIT}px`,
 });
 
 export const downloadActions = style({
+  height: "fit-content",
   display: "flex",
-  alignItems: "center",
+  alignItems: "stretch",
   gap: `${SPACING_UNIT}px`,
 });
 

diff --git a/src/renderer/src/pages/downloads/downloads.tsx b/src/renderer/src/pages/downloads/downloads.tsx
@@ -101,7 +101,7 @@ export function Downloads() {
     if (game.progress === 1) {
       return (
         <>
-          <p>{game.repack?.title}</p>
+          <p className={styles.repackTitle}>{game.repack?.title}</p>
           <p>{t("completed")}</p>
         </>
       );