code-hike / codehike

Marvellous code walkthroughs
https://codehike.org
MIT License
4.39k stars 135 forks source link

Scrollbar disappear when using focus annotation #312

Closed MousaZeidBaker closed 1 year ago

MousaZeidBaker commented 1 year ago

Hey!! Thanks for this great package.

The scrollbar disappears when using focus annotation on short lines, see following examples

Without focus annotation

```yaml Example
message: hello world
longMessage: 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.

![image](https://user-images.githubusercontent.com/16031346/212426784-5170ec5d-0ded-4085-b4d4-48ee1fdb1e00.png)

**With focus annotation on line 1 (scrollbar disappears)**
message: hello world
longMessage: 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.

![image](https://user-images.githubusercontent.com/16031346/212426936-31f85bdb-249a-4725-abd1-e5c35edd5a07.png)

**With focus annotation on line 2**
message: hello world
longMessage: 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.


![image](https://user-images.githubusercontent.com/16031346/212427193-0825b62f-6950-4e5f-b98d-360f0472fd23.png)
pomber commented 1 year ago

Hi! That's intentional, the same will happen with vertical scrollbars.

MousaZeidBaker commented 1 year ago

Hi! That's intentional, the same will happen with vertical scrollbars.

Thanks for the quick reply. Is there a way to keep the scrollbars?

pomber commented 1 year ago

Thanks for the quick reply. Is there a way to keep the scrollbars?

A dirty workaround is to focus on a whitespace of the long line.

```yaml Example focus=1,2[13]
message: hello world
longMessage: 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.