Merge pull request #328 from cloudflare/break-all-fix

remove break-all
2023-02-22 13:49:57 +00:00 · 2023-02-22 13:49:57 +00:00 · 02b7e884b5
commit 02b7e884b5
--- a/frontend/package.json
+++ b/frontend/package.json
@ -26,6 +26,7 @@
 		"eslint": "8.30.0",
 		"eslint-plugin-qwik": "0.16.1",
 		"jest": "^29.3.1",
+		"lorem-ipsum": "^2.0.8",
 		"node-fetch": "3.3.0",
 		"postcss": "^8.4.16",
 		"prettier": "2.8.1",
--- a/frontend/src/components/AccountCard/AccountCard.tsx
+++ b/frontend/src/components/AccountCard/AccountCard.tsx
@ -13,18 +13,17 @@ export const AccountCard = component$<{
 	const accountUrl = useAccountUrl(account)

 	return (
-		<Link
-			href={accountUrl}
-			class="inline-grid grid-cols-[repeat(2,_max-content)] grid-rows-[1fr,1fr] items-center no-underline"
-		>
-			<div class="row-span-2">
+		<Link href={accountUrl} class="inline-flex items-center no-underline flex-wrap gap-2">
+			<div class="flex-grow flex-shrink-0 flex justify-center">
 				<Avatar primary={account} secondary={secondaryAvatar ?? null} />
 			</div>
-			<div data-testid="account-display-name" class="ml-2 col-start-2 row-start-1">
-				{getDisplayNameElement(account)}
-			</div>
-			<div class="ml-2 text-wildebeest-400 col-start-2 row-start-2">
-				@{subText === 'username' ? account.username : account.acct}
+			<div>
+				<div data-testid="account-display-name" class="col-start-2 row-start-1">
+					{getDisplayNameElement(account)}
+				</div>
+				<div class="text-wildebeest-400 col-start-2 row-start-2">
+					@{subText === 'username' ? account.username : account.acct}
+				</div>
 			</div>
 		</Link>
 	)
--- a/frontend/src/components/Status/index.tsx
+++ b/frontend/src/components/Status/index.tsx
@ -32,9 +32,9 @@ export default component$((props: Props) => {
 	return (
 		<article class="p-4 border-t border-wildebeest-700 break-words">
 			<RebloggerLink account={reblogger}></RebloggerLink>
-			<div class="flex justify-between mb-3">
+			<div class="flex justify-between mb-3 flex-wrap">
 				<AccountCard account={status.account} subText={props.accountSubText} secondaryAvatar={reblogger} />
-				<Link class="no-underline" href={statusUrl}>
+				<Link class="no-underline ml-auto" href={statusUrl}>
 					<div class="text-wildebeest-500 flex items-baseline">
 						<i style={{ height: '0.75rem', width: '0.75rem' }} class="fa fa-xs fa-globe w-3 h-3" />
 						<span class="ml-2 text-sm hover:underline min-w-max">{formatTimeAgo(new Date(status.created_at))}</span>
--- a/frontend/src/components/layout/RightColumn/RightColumn.tsx
+++ b/frontend/src/components/layout/RightColumn/RightColumn.tsx
@ -38,7 +38,7 @@ export default component$(() => {
 	// const aboutLink = { iconName: 'fa-ellipsis', linkText: 'About', linkTarget: '/about', linkActiveRegex: /^\/about/ }

 	return (
-		<div class="bg-wildebeest-600 xl:bg-transparent flex flex-col justify-between right-column-wrapper text-wildebeest-200 flex-1">
+		<div class="bg-wildebeest-600 xl:bg-transparent flex flex-col justify-between right-column-wrapper text-wildebeest-200 flex-1 z-10">
 			<div class="sticky top-[3.9rem] xl:top-0">
 				<div class="xl:p-4">
 					<Link class="no-underline hidden xl:flex items-center" aria-label="Wildebeest Home" href={'/'}>
--- a/frontend/src/dummyData/statuses.ts
+++ b/frontend/src/dummyData/statuses.ts
@ -1,6 +1,7 @@
 import type { MediaAttachment, MastodonStatus } from '~/types'
 import { generateDummyStatus } from './generateDummyStatus'
 import { ben, george, penny, rafael, zak } from './accounts'
+import { loremIpsum } from 'lorem-ipsum'

 // Raw statuses which follow the precise structure found mastodon does
 const mastodonRawStatuses: MastodonStatus[] = [
@ -38,6 +39,11 @@ const mastodonRawStatuses: MastodonStatus[] = [
 			.fill(null)
 			.map((_, idx) => generateDummyMediaImage(`https:/loremflickr.com/640/480/abstract?lock=${100 + idx}`)),
 	}),
+	generateDummyStatus({
+		content:
+			loremIpsum({ count: 2, format: 'html', units: 'paragraphs' }) +
+			'<p>#テスト投稿\n長いURLを投稿してみる\nついでに改行も複数いれてみる\n\n\n良いプログラマになるには | プログラマが知るべき97のこと\n<a href="https://xn--97-273ae6a4irb6e2hsoiozc2g4b8082p.com/%E3%82%A8%E3%83%83%E3%82%BB%E3%82%A4/%E8%89%AF%E3%81%84%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%AB%E3%81%AF/">xn--97-273ae6a4irb6e2hsoiozc2g4b8082p.com/%E3%82%A8%E3%83%83%E3%82%BB%E3%82%A4/%E8%89%AF%E3%81%84%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%AB%E3%81%AF/</a></p>',
+	}),
 ]

 export const statuses: MastodonStatus[] = mastodonRawStatuses.map((rawStatus) => ({
--- a/frontend/src/routes/(frontend)/layout.tsx
+++ b/frontend/src/routes/(frontend)/layout.tsx
@ -40,13 +40,13 @@ export default component$(() => {
 					<WildebeestLogo size="small" />
 				</Link>
 			</header>
-			<main class="flex-1 flex justify-center top-[3.9rem]">
+			<main class="flex-1 flex justify-center top-[3.9rem] max-w-screen">
 				<div class="w-fit md:w-72 hidden xl:block mx-2.5">
 					<div class="sticky top-2.5">
 						<LeftColumn />
 					</div>
 				</div>
-				<div class="w-full xl:max-w-xl bg-wildebeest-600 xl:bg-transparent flex flex-col break-all">
+				<div class="w-0 xl:max-w-xl bg-wildebeest-600 xl:bg-transparent flex flex-col flex-1">
 					<div class="bg-wildebeest-600 rounded flex flex-1 flex-col">
 						<Slot />
 					</div>
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -1441,6 +1441,11 @@ commander@^4.0.0:
  resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==

+commander@^9.3.0:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
+
 concat-map@0.0.1:
  version "0.0.1"
  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@ -2814,6 +2819,13 @@ longest-streak@^3.0.0:
  resolved "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz"
  integrity sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==

+lorem-ipsum@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/lorem-ipsum/-/lorem-ipsum-2.0.8.tgz#f969a089f2ac6f19cf01b854b61beabb0e6f3cbc"
+  integrity sha512-5RIwHuCb979RASgCJH0VKERn9cQo/+NcAi2BMe9ddj+gp7hujl6BI+qdOG4nVsLDpwWEJwTVYXNKP6BGgbcoGA==
+  dependencies:
+    commander "^9.3.0"
+
 lru-cache@^6.0.0:
  version "6.0.0"
  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
--- a/playwright.config.ts
+++ b/playwright.config.ts
@ -66,18 +66,18 @@ const config: PlaywrightTestConfig = {
 		},

 		/* Test against mobile viewports. */
-		// {
-		//   name: 'Mobile Chrome',
-		//   use: {
-		//     ...devices['Pixel 5'],
-		//   },
-		// },
-		// {
-		//   name: 'Mobile Safari',
-		//   use: {
-		//     ...devices['iPhone 12'],
-		//   },
-		// },
+		{
+			name: 'Mobile Chrome',
+			use: {
+				...devices['Pixel 5'],
+			},
+		},
+		{
+			name: 'Mobile Safari',
+			use: {
+				...devices['iPhone 12'],
+			},
+		},

 		/* Test against branded browsers. */
 		// {