Improve layout and add edit button for user-owned translations (#377)

ttizze · Nov 23, 2024 · d6b59a1 · d6b59a1
2 parents 83dad81 + aea01b6
commit d6b59a1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 27 deletions.
diff --git a/web/app/routes/$userName+/page+/$slug+/components/ContentWithTranslations.tsx b/web/app/routes/$userName+/page+/$slug+/components/ContentWithTranslations.tsx
@@ -57,20 +57,34 @@ export function ContentWithTranslations({
 		);
 	return (
 		<>
-			<h1 className="!mb-5">
-				{sourceTitleWithTranslations && (
-					<SourceTextAndTranslationSection
-						sourceTextWithTranslations={sourceTitleWithTranslations}
-						isPublished={pageWithTranslations.page.isPublished}
-						elements={sourceTitleWithTranslations.sourceText.text}
-						sourceLanguage={pageWithTranslations.page.sourceLanguage}
-						targetLanguage={targetLanguage}
-						onOpenAddAndVoteTranslations={handleOpenAddAndVoteTranslations}
-						showOriginal={true}
-						showTranslation={true}
-					/>
-				)}
-			</h1>
+			<div className="flex items-center justify-between">
+				<h1 className="!mb-5">
+					{sourceTitleWithTranslations && (
+						<SourceTextAndTranslationSection
+							sourceTextWithTranslations={sourceTitleWithTranslations}
+							isPublished={pageWithTranslations.page.isPublished}
+							elements={sourceTitleWithTranslations.sourceText.text}
+							sourceLanguage={pageWithTranslations.page.sourceLanguage}
+							targetLanguage={targetLanguage}
+							onOpenAddAndVoteTranslations={handleOpenAddAndVoteTranslations}
+							showOriginal={true}
+							showTranslation={true}
+						/>
+					)}
+				</h1>
+				{pageWithTranslations.user.userName === currentUserName &&
+					currentUserName && (
+						<div className="ml-auto">
+							<Button asChild variant="ghost">
+								<Link
+									to={`/${currentUserName}/page/${pageWithTranslations.page.slug}/edit`}
+								>
+									<SquarePen className="w-5 h-5" />
+								</Link>
+							</Button>
+						</div>
+					)}
+			</div>
 			<TranslateButton
 				pageId={pageWithTranslations.page.id}
 				userAITranslationInfo={userAITranslationInfo}
@@ -96,18 +110,6 @@ export function ContentWithTranslations({
 						</span>
 					</div>
 				</Link>
-				{pageWithTranslations.user.userName === currentUserName &&
-					currentUserName && (
-						<div className="ml-auto">
-							<Button asChild variant="ghost">
-								<Link
-									to={`/${currentUserName}/page/${pageWithTranslations.page.slug}/edit`}
-								>
-									<SquarePen className="w-5 h-5" />
-								</Link>
-							</Button>
-						</div>
-					)}
 			</div>
 			{!isHydrated ? (
 				<div className="w-full h-full flex items-center justify-center">

diff --git a/web/app/routes/$userName+/page+/$slug+/index.tsx b/web/app/routes/$userName+/page+/$slug+/index.tsx
@@ -219,7 +219,7 @@ export default function Page() {
 					showOriginal={showOriginal}
 					showTranslation={showTranslation}
 				/>
-				<div className="flex flex-wrap gap-2">
+				<div className="flex flex-wrap gap-2 pb-4">
 					{pageWithTranslations.tagPages.map((tagPage) => (
 						<div
 							key={tagPage.tag.id}