Refine install list and responsive scaling

app/assets/css/launcher.css

@@ -3293,6 +3293,7 @@ input:checked + .toggleSwitchSlider:before {
     font-weight: 900;
     text-shadow: 0px 0px 20px #949494;
     margin-left: 12px;
+    white-space: nowrap;
 }
 
 /* Wrapper container for the mojang status bar. */
@@ -3463,6 +3464,7 @@ input:checked + .toggleSwitchSlider:before {
     line-height: 36px;
     display: flex;
     transition: 0.25s ease;
+    white-space: nowrap;
 }
 
 /* * *
@@ -3488,6 +3490,7 @@ input:checked + .toggleSwitchSlider:before {
     padding: 0px;
     transition: 0.25s ease;
     outline: none;
+    white-space: nowrap;
 }
 #launch_button:hover,
 #launch_button:focus {
@@ -3543,6 +3546,7 @@ input:checked + .toggleSwitchSlider:before {
     line-height: 30px;
     padding: 0px;
     transition: 0.25s ease;
+    white-space: nowrap;
 }
 #server_selection_button:hover,
 #server_selection_button:focus {
@@ -4150,8 +4154,8 @@ input:checked + .toggleSwitchSlider:before {
 }
 
 .launcherCardGrid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    display: flex;
+    flex-direction: column;
     gap: 16px;
 }
 
@@ -4163,9 +4167,9 @@ input:checked + .toggleSwitchSlider:before {
 
 .launcherListItem {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 20px;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 18px;
     padding: 22px 24px;
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 20px;
@@ -4188,6 +4192,13 @@ input:checked + .toggleSwitchSlider:before {
     gap: 8px;
 }
 
+.launcherListItemTop {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 20px;
+}
+
 .launcherListTitleRow {
     display: flex;
     align-items: flex-start;
@@ -4206,6 +4217,9 @@ input:checked + .toggleSwitchSlider:before {
     margin: 0;
     font-size: 24px;
     color: #ffffff;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .launcherListMeta {
@@ -4228,6 +4242,22 @@ input:checked + .toggleSwitchSlider:before {
     justify-content: flex-end;
     gap: 10px;
     flex-wrap: wrap;
+    flex-shrink: 0;
+}
+
+.launcherExpandableDetail {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    padding-top: 18px;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.launcherExpandableMeta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
 }
 
 .launcherCard {
@@ -4241,6 +4271,7 @@ input:checked + .toggleSwitchSlider:before {
     background: rgba(15, 15, 15, 0.56);
     backdrop-filter: blur(10px);
     box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
+    width: 100%;
 }
 
 .launcherCard[selected="true"] {
@@ -4264,6 +4295,9 @@ input:checked + .toggleSwitchSlider:before {
     margin: 0;
     font-size: 26px;
     color: #ffffff;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .launcherCardMeta {
@@ -4283,6 +4317,7 @@ input:checked + .toggleSwitchSlider:before {
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: rgba(255, 255, 255, 0.8);
+    white-space: nowrap;
 }
 
 .launcherCardDescription,
@@ -4428,6 +4463,7 @@ input:checked + .toggleSwitchSlider:before {
     font-weight: 600;
     cursor: pointer;
     transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+    white-space: nowrap;
 }
 
 .launcherPrimaryButton {