Buttons cover up code snippets when using touch

[TodePond]

Normally these buttons in the top right of a code snippet only appear when you hover the snippet.

But when you're using touch, they're always there. This is fine when your screen is big. But when you're using a small screen, it covers up the snippet, and you can't hide it:

Not sure what the solution should be here. I notice that gitbook and docusaurus both only show this top-right button when you tap the snippet. That doesn't feel ideal either, but maybe better than having it cover up the snippet?

[stevekrouse]

Great feedback! This makes these snippets fairly ugly on mobile. Options:

1. We could make all our embeds look like the ones with file names because that adds a top row which solves this problem
2. We could copy "own row" styling but only for mobile

I don't love giving vals file names because they have val names, not file names, but I guess it's fine.

@Xkonti what do you think?

[Xkonti]

I think the option 1 is doable although initially we tried to avoid it (you can't get the title row to show up without specifying the title). The thing it that even though we would move the "Run in Val Town" button, the "copy" button would still be there in the top right corner.

[Xkonti]

Adding the CSS to simply add margin to the top of to code in code blocks in mobile sizing would be probably the easiest solution.

[stevekrouse]

Adding the CSS to simply add margin to the top of to code in code blocks in mobile sizing would be probably the easiest solution.

Cool let's try this - send me a screenshot of how it'd look?

[Xkonti]

@stevekrouse Doesn't look the best, but it's really easy to implement.

And for code blocks that are not vals it looks like this:

[stevekrouse]

Yeah not terrible, especially if it's only shown like that on moblie. Maybe go with that as a stop gap for now?

Random other idea: maybe if we just drop the extension (.ts or .tsx) from the val name in the header, we could switch all the examples to look like vals with names. It was the extension part that annoyed me because vals don't have those.

[Xkonti]

If you add titles through the dedicated syntax the title can be anything.

Comment syntax:

```ts val
//resizeImage.ts
export ...

Dedicated syntax (preferred):

```ts title="resizeImage"
export ...

```ts title="@user/resizeImage usage example"
let img = ...

Additionally when using the comment syntax, the comment will be included in the code when clicking "Run in Val Town". (I think)

[stevekrouse]

Ok cool, so what do you think - update all vals to have titles or do the css trick?

[Xkonti]

I would lean towards all Vals having titles. Gives consistency, every Val having clear "run in Val Town" button. An approach seen often in various docs. It also differentiates Vals from simple code snippets a bit more.

[stevekrouse]

Ok cool, can you make me an example of how it'd look? I could get on board with that.

Can we link from the val's @stevekrouse/foo title to that val?

Or maybe we should just drop the handle and have it just say foo for simplicity

[Xkonti]

Docs-only code

The same preact val with a title:

The copy button still obstructs code initially but the built-in code frame makes extra room for it when scrolled to the right:

Existing vals

Do you mean that the title @stevekrouse/foo would also be a link to an existing val? For that we have an embed. In theory we could make an alternative component that when pre-rendered by Astro given the user+valname it would fetch code from Val Town and provide links to open it. Something like this:

<ValCode val="@stevekrouse/foo" />

[stevekrouse]

Ok cool let's just do titles for everything, but without the file extension ie .tsx

Yeah I like that idea for existing vals, but maybe down the line