Skip to content

Conversation

@cmilesb
Copy link
Contributor

@cmilesb cmilesb commented Jun 25, 2025

Usage:
{{< scrollable-code lines="10" >}}
Content with many lines here...
{{< /scrollable-code >}}

Ideally used for just code blocks. In theory, you could use this for any content, but I think that would require a lot of re-tooling.

@cmilesb cmilesb requested review from a team, joniredis and mich-elle-luna June 25, 2025 20:29
@cmilesb cmilesb self-assigned this Jun 25, 2025
{{ $lines := .Get "lines" | default "25" }}
{{ $lineHeight := add (float $lines) 1.5 }}

<div class="expand-content overflow-auto my-4" style="height: {{ $lineHeight }}lh;">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest trying to use Tailwind CSS site-wide, so, in this case, you could try using the following Tailwind class instead of the style attribute as shown below. Can you give this a try and see if it works?

Suggested change
<div class="expand-content overflow-auto my-4" style="height: {{ $lineHeight }}lh;">
<div class="expand-content overflow-auto my-4 h-[{{ $lineHeight }}lh]">

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did try that before I opened this PR, and for some reason, it doesn't get picked up, but using the style: version does. I have no idea why.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It may be that our version of Tailwind doesn't support those kinds of classes. Thank you for trying (and for reading my mind). 🙂

Copy link
Collaborator

@dwdougherty dwdougherty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works well. Approved.

@cmilesb cmilesb requested a review from AdarBahar June 26, 2025 14:21
Copy link
Contributor

@AdarBahar AdarBahar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@cmilesb cmilesb merged commit 43077a0 into main Jun 26, 2025
5 checks passed
@cmilesb cmilesb deleted the scrollabe-section branch June 26, 2025 14:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants