Fix column width on mobile

.github/generate.py

@@ -189,12 +189,12 @@ def generate_table_grid(themes) -> str:
     for i, theme in enumerate(themes):
         if i > 0 and i % THEMES_COLS == 0:
             buffer += "</tr><tr>\n"
-        buffer += generate_item(theme, collect_data=True)
+        buffer += generate_item(theme, index=i, collect_data=True)
 
     return apply_template(GRID_TEMPLATE, {"GRID_ITEMS": buffer})
 
 
-def generate_item(theme: str, collect_data: bool = False) -> str:
+def generate_item(theme: str, index: int = 0, collect_data: bool = False) -> str:
     dir_path = os.path.join(THEME_DIR, theme)
     is_valid, has_subdirs = validate_theme(dir_path)
 
@@ -273,6 +273,7 @@ def generate_item(theme: str, collect_data: bool = False) -> str:
         "PREVIEW_URL": preview_url,
         "RELEASE_URL": release_url,
         "HISTORY_URL": history_url,
+        "COLUMN_SPANNER": THEMES_COLUMN_SPANNER if index < THEMES_COLS else "",
         "COLUMN_WIDTH": f"{100 / THEMES_COLS:.2f}%"
     }
 

.github/generate_icons.py

@@ -54,24 +54,26 @@ def get_ordered_icons() -> list[dict]:
 
 def generate_icon_pack_table(icon_packs: list[IconPack]) -> str:
     current_path = os.path.join(PAGES_ICONS_DIR, ".")
-    output = "<table align=center><tr>\n\n"
+    buffer = "<table align=center><tr>\n\n"
 
     for i, icon_pack in enumerate(icon_packs):
         if i > 0 and i % ICONS_COLS == 0:
-            output += "</tr><tr>\n"
-        output += generate_icon_pack_entry(current_path, icon_pack, index=i)
+            buffer += "</tr><tr>\n"
+        buffer += generate_icon_pack_entry(current_path, icon_pack, index=i)
 
-    output += "</tr></table>\n\n"
+    buffer += "</tr></table>\n\n"
 
-    return output
+    return buffer
 
 
 def generate_icon_pack_entry(current_path: str, icon_pack: IconPack, index: int = 0):
     preview_path = from_src(os.path.join(icon_pack.path, f"preview.png"))
 
     ensure_has_icon_preview(icon_pack.path)
 
-    output = f"""\n<td valign="top" width="{100 / ICONS_COLS:.2f}%">\n\n[![{icon_pack.name}]({urlencode(rel_path(preview_path, current_path))})]({icon_pack.preview_url} "Click to see the full icon pack preview page")\n\n**{icon_pack.name}**\n\n"""
+    buffer = f"""\n<td valign="top" width="{100 / ICONS_COLS:.2f}%">\n\n"""
+    buffer += f"""[![{icon_pack.name}]({urlencode(rel_path(preview_path, current_path))})]({icon_pack.preview_url} "Click to see the full icon pack preview page")\n\n"""
+    buffer += f"**{icon_pack.name}**\n\n"
 
     dn_text = f"Download theme" if icon_pack.is_theme else f"Download icon pack"
     dn_link = f"[{dn_text}]({icon_pack.release_url} \"{icon_pack.theme if icon_pack.is_theme else icon_pack.name}\")"
@@ -88,11 +90,11 @@ def generate_icon_pack_entry(current_path: str, icon_pack: IconPack, index: int
     readme = f"<a href=\"{urlencode(readme_path)}\">{README_ICON}</a> {NB_SPACER} " if len(readme_path) != 0 else ""
 
     icon_count = sum(os.path.isfile(f"{icon_pack.path}/{icon}.png") for icon in ALL_ICONS)
-    output += f"{dn_link} <sub><sup>{NB_SPACER} {icon_count / len(ALL_ICONS) * 100:.0f}%{NB_SPACE}complete</sup> {NB_SPACER} {readme}</sub>"
+    buffer += f"{dn_link} <sub><sup>{NB_SPACER} {icon_count / len(ALL_ICONS) * 100:.0f}%{NB_SPACE}complete</sup> {NB_SPACER} {readme}</sub>"
 
-    output += f"\n\n</td>\n\n"
+    buffer += f"\n\n{ICONS_COLUMN_SPANNER if index < ICONS_COLS else ''}<br/></td>\n\n"
 
-    return output
+    return buffer
 
 
 def generate_preview_image(output_path: str, icon_paths: list[str], cols: int = 2, rows: int = 4, w: int = 250, h: int = 360):

.github/template/item.template.html

@@ -1,4 +1,5 @@
 <td align="center" valign="top" width="$COLUMN_WIDTH">
+$COLUMN_SPANNER<br/>
 <a href="$RELEASE_URL">
 <img title="$TITLE" width="480px" src="$PREVIEW_URL" /><br/>
 <b>$NAME</b>