# Codeblock copy or expand button blocks scroll UI components

**URL:** https://meta.discourse.org/t/codeblock-copy-or-expand-button-blocks-scroll-ui-components/256243
**Category:** Bug
**Created:** [February 25, 2023, 3:24pm UTC](https://meta.discourse.org/t/codeblock-copy-or-expand-button-blocks-scroll-ui-components/256243 "2023-02-25T15:24:32Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![per1234](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/per1234/32/569645_2.png) [@per1234](https://meta.discourse.org/u/per1234)
#### Post date: [February 25, 2023, 3:24pm UTC](https://meta.discourse.org/t/codeblock-copy-or-expand-button-blocks-scroll-ui-components/256243/1 "2023-02-25T15:24:32Z")

</div>

## Priority/Severity

Low

## Platform

### Discourse Version

[`9c669f3`](https://github.com/discourse/discourse/commit/9c669f3bdcd5ea2c1fbc7fa5c9b041f8c7b4bdf7)

### Operating System

- Windows 11
- Ubuntu 22.04
- macOS Ventura

### Browser

- Chrome 110.0.5481.178
- Safari 18614.4.6.1.6

## Description

When [the `show copy button on codeblocks` setting](https://meta.discourse.org/t/copy-codeblock-contents-to-clipboard/148855) is enabled the codeblock copy button blocks the use of the up button on the codeblock’s vertical scrollbar and also interferes with access to the scrollbar “thumb”.

**Windows/Linux:**

![windows_linux](https://global.discourse-cdn.com/meta/original/4X/e/2/1/e216a873bc9f38263a73e9ce71311822760746ef.gif)

**macOS:**

![Untitled](https://global.discourse-cdn.com/meta/original/4X/a/8/2/a82ee7c4da71f7106bd35887abfd6e8813fda43f.gif)

## Reproducible steps

1. Hover the mouse pointer over the scrollbar of the codeblock below.

:bug: The copy button interferes with access to the scrollbar’s up button and/or thumb.

```plaintext
Lorem ipsum
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a

```

## Additional Context

I was not able to reproduce the fault on `try.discourse.org` because the `show copy button on codeblocks` setting is not enabled on that Discourse instance.

* * *

The fault is also caused by the expand button added to codeblocks that have a horizontal scrollbar:

```plaintext
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a

```

![windows_linux_expand](https://global.discourse-cdn.com/meta/original/4X/c/e/f/cef8c727a0c94a6fb4f5ce5d7c24b715d859b9ce.gif)

* * *

Originally reported at [Minor flaw makes it impossible to 'nudge' - Website and Forum - Arduino Forum](https://forum.arduino.cc/t/minor-flaw-makes-it-impossible-to-nudge/1094720)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [February 27, 2023, 3:13am UTC](https://meta.discourse.org/t/codeblock-copy-or-expand-button-blocks-scroll-ui-components/256243/2 "2023-02-27T03:13:47Z")

</div>

Thanks, yeah I agree a tiny extra margin here should make it better, I am not certain if we can dynamically account for scrollbar width using CSS. We will get it sorted out.

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [February 28, 2023, 4:23pm UTC](https://meta.discourse.org/t/codeblock-copy-or-expand-button-blocks-scroll-ui-components/256243/4 "2023-02-28T16:23:38Z")

</div>

Will be fixed in this soon to be merged PR:

[https://github.com/discourse/discourse/pull/20483](https://github.com/discourse/discourse/pull/20483)

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [February 28, 2023, 4:23pm UTC](https://meta.discourse.org/t/codeblock-copy-or-expand-button-blocks-scroll-ui-components/256243/5 "2023-02-28T16:23:46Z")

</div>