Stretch Only the Last Cell in Candidate List

TypeDuck-HK · May 28, 2024 · 977dd30 · 977dd30
1 parent 44e9e78
commit 977dd30
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/Candidate.tsx b/src/Candidate.tsx
@@ -84,12 +84,12 @@ export default function Candidate({ isHighlighted, info, selectCandidate, delete
 							return definitions.length ? [<td key={index} className={commentStyle400}>{definitions}</td>] : [];
 						})
 						: !!labelColSpan && <td className={commentStyle400} colSpan={labelColSpan}>{entry.formattedLabels?.join(" ")}</td>}
-					<td className={`font-geometric text-[11pt] ${commentStyle200} align-middle`}>{!index && info.hasDictionaryEntry(prefs) && "ⓘ"}</td>
+					<td className={`font-geometric text-[11pt] ${commentStyle200} align-middle text-right w-full`}>{!index && info.hasDictionaryEntry(prefs) && "ⓘ"}</td>
 				</tr>
 			) || <tr>
 				<td className={`font-geometric text-[11pt] ${commentStyle200}`}>{info.label}</td>
 				<td className={`${prefs.isHeiTypeface ? "font-hei" : "font-sung"} text-[13pt]${isHighlighted ? " bg-primary text-primary-content" : ""}`}>{info.text}</td>
-				<td className={commentStyle400} colSpan={labelColSpan + 2}>{(!info.isReverseLookup || prefs.showReverseCode) && info.note}</td>
+				<td className={`${commentStyle400} w-full`} colSpan={labelColSpan + 2}>{(!info.isReverseLookup || prefs.showReverseCode) && info.note}</td>
 			</tr>}
 		</button>
 	</tbody>;

diff --git a/src/CandidatePanel.tsx b/src/CandidatePanel.tsx
@@ -178,7 +178,7 @@ export default function CandidatePanel({ runAsyncTask, textArea, prefs, deploySt
 					</button>
 				</div>
 			</div>
-			<table ref={candidateList} className="candidates w-full">
+			<table ref={candidateList} className="candidates">
 				{inputState.candidates.map((candidate, index) =>
 					<Candidate
 						key={index}

diff --git a/src/index.css b/src/index.css
@@ -82,16 +82,16 @@
 }
 .candidates button {
 	tr:first-child td:first-child {
-		@apply rounded-ss-md;
+		@apply rounded-ss-md min-w-1.5;
 	}
 	tr:first-child td:last-child {
-		@apply rounded-se-md;
+		@apply rounded-se-md min-w-1.5;
 	}
 	tr:last-child td:first-child {
-		@apply rounded-es-md;
+		@apply rounded-es-md min-w-1.5;
 	}
 	tr:last-child td:last-child {
-		@apply rounded-ee-md;
+		@apply rounded-ee-md min-w-1.5;
 	}
 }
 @supports selector(:has(*)) {