Skip to content

Commit f686c83

Browse files
almeidxalmeidx
authored
fix: codeblock background and other mobile issues (#10892)
* fix: codeblock background * fix: horizontal scroll on properties * fix: badge text wrapping * fix: wrap overload tab list
1 parent 436784f commit f686c83

File tree

6 files changed

+11
-11
lines changed

6 files changed

+11
-11
lines changed

‎apps/website/src/components/Badges.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { PropsWithChildren } from 'react';
44
export function Badge({ children, className = '' }: PropsWithChildren<{ readonly className?: string }>) {
55
return (
66
<span
7-
className={`inline-flex place-items-center gap-1 rounded-full px-2 py-1 font-sans text-sm leading-none font-normal ${className}`}
7+
className={`inline-flex place-items-center gap-1 rounded-full px-2 py-1 font-sans text-sm leading-none font-normal whitespace-nowrap ${className}`}
88
>
99
{children}
1010
</span>
@@ -24,7 +24,7 @@ export async function Badges({ node }: { readonly node: any }) {
2424
const isAny = isDeprecated || isProtected || isStatic || isAbstract || isReadonly || isOptional || isExternal;
2525

2626
return isAny ? (
27-
<div className="mb-1 flex gap-3">
27+
<div className="mb-1 flex flex-wrap gap-3">
2828
{isDeprecated ? (
2929
<Badge className="bg-red-500/20 text-red-500">
3030
<AlertTriangle aria-hidden size={14} /> deprecated

‎apps/website/src/components/DocItem.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ async function OverloadNode({
3030

3131
return (
3232
<Tabs className="flex flex-col gap-4">
33-
<TabList className="flex gap-2">
33+
<TabList className="flex flex-wrap gap-2">
3434
{node.overloads.map((overload: any) => (
3535
<Tab
36-
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
36+
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal whitespace-nowrap text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
3737
id={`overload-${overload.displayName}-${overload.overloadIndex}`}
3838
key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
3939
>
@@ -75,7 +75,7 @@ export async function DocItem({
7575

7676
<Scrollbars className="border-base-neutral-200 dark:border-base-neutral-600 bg-base-neutral-100 dark:bg-base-neutral-900 rounded-sm border">
7777
<SyntaxHighlighter
78-
className="w-min bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]"
78+
className="min-w-max bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]"
7979
code={node.sourceExcerpt}
8080
lang="typescript"
8181
/>

‎apps/website/src/components/DocNode.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export async function DocNode({ node, version }: { readonly node?: any; readonly
7272
key={`${language}-${text}-${idx}`}
7373
>
7474
<SyntaxHighlighter
75-
className="w-min bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]"
75+
className="min-w-max bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]"
7676
code={text}
7777
lang={language}
7878
/>

‎apps/website/src/components/EventNode.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,10 +104,10 @@ async function OverloadNode({
104104
}) {
105105
return (
106106
<Tabs className="flex flex-col gap-4">
107-
<TabList className="flex gap-2">
107+
<TabList className="flex flex-wrap gap-2">
108108
{event.overloads.map((overload: any) => (
109109
<Tab
110-
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
110+
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal whitespace-nowrap text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
111111
id={`overload-${overload.displayName}-${overload.overloadIndex}`}
112112
key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
113113
>

‎apps/website/src/components/MethodNode.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,10 @@ async function OverloadNode({
108108
}) {
109109
return (
110110
<Tabs className="flex flex-col gap-4">
111-
<TabList className="flex gap-2">
111+
<TabList className="flex flex-wrap gap-2">
112112
{method.overloads.map((overload: any) => (
113113
<Tab
114-
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
114+
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm leading-none font-normal whitespace-nowrap text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
115115
id={`overload-${overload.displayName}-${overload.overloadIndex}`}
116116
key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
117117
>

‎apps/website/src/components/PropertyNode.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export async function PropertyNode({
3838
<div className="flex flex-col gap-4">
3939
<div className="flex place-content-between place-items-center gap-1">
4040
<h3
41-
className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group flex flex-col gap-2 px-2 font-mono font-semibold break-words`}
41+
className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group flex flex-col gap-2 px-2 font-mono font-semibold break-all`}
4242
id={property.displayName}
4343
>
4444
<Badges node={property} />

0 commit comments

Comments
 (0)