Merge pull request #1003 from vrc-get/fix-table-width

chore: improve projects page with narrow window
vrc-get · May 19, 2024 · 7051558 · 7051558
2 parents a1e995b + f7cba77
commit 7051558
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/CHANGELOG-gui.md b/CHANGELOG-gui.md
@@ -17,6 +17,7 @@ The format is based on [Keep a Changelog].
 - Ask installing unity for a project if not installed `#988`
 - Removed Visual Scripting from dependencies of template projects `#991`
 - Support more legacy browsers `#994`
+- Improved UI with narrow windows `#1003`
 
 ### Deprecated
 

diff --git a/vrc-get-gui/app/projects/page.tsx b/vrc-get-gui/app/projects/page.tsx
@@ -429,6 +429,7 @@ function ProjectRow(
 	const removed = !project.is_exists;
 
 	const MayTooltip = removed ? Tooltip : Fragment;
+	const MayTooltipRev = !removed ? Tooltip : Fragment;
 
 	const RowButton = forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(function RowButton(props, ref) {
 		if (removed) {
@@ -529,27 +530,31 @@ function ProjectRow(
 
 	return (
 		<tr className={`even:bg-blue-gray-50/50 ${(removed || loading) ? 'opacity-50' : ''}`}>
-			<td className={cellClass}>
+			<td className={`${cellClass} w-3`}>
 				<Checkbox ripple={false} containerProps={{className: "p-0 rounded-none"}}
 									checked={project.favorite}
 									onChange={onToggleFavorite}
 									disabled={removed || loading}
 									icon={<StarIcon className={"size-3"}/>}
 									className="hover:before:content-none before:transition-none border-none"/>
 			</td>
-			<td className={cellClass}>
+			<td className={`${cellClass} max-w-64 overflow-hidden`}>
 				<MayTooltip content={tc("projects:tooltip:no directory")}>
 					<div className="flex flex-col">
-						<Typography className="font-normal whitespace-pre">
-							{project.name}
-						</Typography>
-						<Typography className="font-normal opacity-50 text-sm whitespace-pre">
-							{project.path}
-						</Typography>
+						<MayTooltipRev content={project.name}>
+							<Typography className="font-normal whitespace-pre">
+								{project.name}
+							</Typography>
+						</MayTooltipRev>
+						<MayTooltipRev content={project.path}>
+							<Typography className="font-normal opacity-50 text-sm whitespace-pre">
+								{project.path}
+							</Typography>
+						</MayTooltipRev>
 					</div>
 				</MayTooltip>
 			</td>
-			<td className={`${cellClass} w-[8em]`}>
+			<td className={`${cellClass} w-[8em] min-w-[8em]`}>
 				<div className="flex flex-row gap-2">
 					<div className="flex items-center">
 						{projectTypeKind === "avatars" ? <UserCircleIcon className={typeIconClass}/> :

diff --git a/vrc-get-gui/src/config.rs b/vrc-get-gui/src/config.rs
@@ -92,7 +92,7 @@ pub struct WindowSize {
 impl Default for WindowSize {
     fn default() -> Self {
         WindowSize {
-            width: 1000,
+            width: 1300,
             height: 800,
         }
     }