mirrors/opencode
1
0
Fork 0
mirror of https://github.com/sst/opencode.git synced 2025-08-28 08:54:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

docs: share page mobile bugs

Browse source
This commit is contained in:
Jay V 2025-07-10 20:16:34 -04:00
parent f7d44b178b
commit 9ca54020ac
7 changed files with 50 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

9
packages/web/src/components/share/content-bash.module.css
View file

@ -1,10 +1,5 @@
.root {
width: 100%;
max-width: var(--sm-tool-width);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
display: contents;
[data-slot="expand-button"] {
flex: 0 0 auto;
@ -13,8 +8,6 @@
}
[data-slot="body"] {
display: flex;
flex-direction: column;
border: 1px solid var(--sl-color-divider);
border-radius: 0.25rem;
overflow: hidden;

1
packages/web/src/components/share/content-code.module.css
View file

@ -1,5 +1,4 @@
.root {
max-width: var(--md-tool-width);
border: 1px solid var(--sl-color-divider);
background-color: var(--sl-color-bg-surface);
border-radius: 0.25rem;

1
packages/web/src/components/share/content-error.module.css
View file

@ -7,7 +7,6 @@
align-items: flex-start;
gap: 1rem;
align-self: flex-start;
max-width: var(--md-tool-width);
[data-section="content"] {
pre {

1
packages/web/src/components/share/content-markdown.module.css
View file

@ -7,7 +7,6 @@
align-items: flex-start;
gap: 1rem;
align-self: flex-start;
max-width: var(--md-tool-width);
&[data-highlight="true"] {
background-color: var(--sl-color-blue-low);

1
packages/web/src/components/share/content-text.module.css
View file

@ -8,7 +8,6 @@
align-items: flex-start;
gap: 1rem;
align-self: flex-start;
max-width: var(--md-tool-width);
font-size: 0.875rem;
&[data-compact] {

48
packages/web/src/components/share/part.module.css
View file

@ -101,10 +101,7 @@
}
[data-component="content"] {
display: flex;
flex-direction: column;
gap: 1rem;
flex-grow: 1;
min-width: 0;
}
[data-component="spacer"] {
@ -117,6 +114,24 @@
color: var(--sl-color-text-dimmed);
}
[data-component="user-text"] {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1rem;
flex-grow: 1;
max-width: var(--md-tool-width);
}
[data-component="assistant-text"] {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1rem;
flex-grow: 1;
max-width: var(--md-tool-width);
}
[data-component="step-start"] {
display: flex;
flex-direction: column;
@ -195,6 +210,31 @@
align-items: flex-start;
gap: 0.375rem;
padding-bottom: 1rem;
&[data-tool="bash"] {
max-width: var(--sm-tool-width);
}
&[data-tool="error"] {
max-width: var(--md-tool-width);
}
&[data-tool="read"],
&[data-tool="edit"],
&[data-tool="list"],
&[data-tool="glob"],
&[data-tool="grep"],
&[data-tool="write"],
&[data-tool="webfetch"] {
[data-component="tool-result"] {
max-width: var(--sm-tool-width);
}
}
&[data-tool="edit"] {
[data-component="tool-result"] {
max-width: var(--lg-tool-width);
}
}
}
[data-component="tool-title"] {

10
packages/web/src/components/share/part.tsx
View file

@ -126,13 +126,13 @@ export function Part(props: PartProps) {
</div>
<div data-component="content">
{props.message.role === "user" && props.part.type === "text" && (
<>
<div data-component="user-text">
<ContentText text={props.part.text} expand={props.last} />
<Spacer />
</>
</div>
)}
{props.message.role === "assistant" && props.part.type === "text" && (
<>
<div data-component="assistant-text">
<ContentMarkdown expand={props.last} text={props.part.text} />
{props.last && props.message.role === "assistant" && props.message.time.completed && (
<Footer
@ -144,7 +144,7 @@ export function Part(props: PartProps) {
</Footer>
)}
<Spacer />
</>
</div>
)}
{props.message.role === "user" && props.part.type === "file" && (
<div data-component="attachment">
@ -159,7 +159,7 @@ export function Part(props: PartProps) {
</div>
)}
{props.part.type === "tool" && props.part.state.status === "error" && (
<div data-component="tool">
<div data-component="tool" data-tool="error">
<ContentError>{formatErrorString(props.part.state.error)}</ContentError>
</div>
)}