Merge pull request #568 from rickxz/style(downloads)/improve-responsive-design

style(downloads): make game actions buttons the same size in smaller devices and crop repack title

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`,
 });
 

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>
         </>
       );