starred/karakeep

Fork 0

mirror of https://github.com/karakeep-app/karakeep.git synced 2026-04-25 16:06:04 +03:00

[GH-ISSUE #793] Scrollbar not working for long notes #517

New issue

Closed

opened 2026-03-02 11:50:31 +03:00 by kerem · 2 comments

kerem commented

2026-03-02 11:50:31 +03:00

Owner

Originally created by @esteve88 on GitHub (Dec 31, 2024).
Original GitHub issue: https://github.com/karakeep-app/karakeep/issues/793

Describe the Bug

When I'm opening the preview of a note from the main screen (using the expand button ), in case of a long note, the note is not completely displayed and the scrollbar is neither displayed nor it is working.
If I refresh the screen, then the note and the scrollbar are both visualized.
This is happening on both Chrome and Edge (on Windows), as well as on Safari (from iOS).

I'm using the latest Hoarder version (0.20.0) installed through Docker. I'm also copying here below my docker compose:

version: "3.8"
services:
  web:
    image: ghcr.io/hoarder-app/hoarder:${HOARDER_VERSION:-release}
    restart: unless-stopped
    volumes:
      - /data/docker/hoarder/hoarder-data:/data
    ports:
      - 3123:3000
    #env_file:
    #  - .env
    environment:
      MEILI_ADDR: http://meilisearch:7700
      BROWSER_WEB_URL: http://chrome:9222
      OPENAI_API_KEY: <redacted>
      DATA_DIR: /data
      HOARDER_VERSION: release
      NEXTAUTH_SECRET: <redacted>
      NEXTAUTH_URL: http://192.168.1.102:3123
      MEILI_MASTER_KEY: <redacted>
  chrome:
    image: gcr.io/zenika-hub/alpine-chrome:123
    restart: unless-stopped
    command:
      - --no-sandbox
      - --disable-gpu
      - --disable-dev-shm-usage
      - --remote-debugging-address=0.0.0.0
      - --remote-debugging-port=9222
      - --hide-scrollbars
  meilisearch:
    image: getmeili/meilisearch:v1.11.1
    restart: unless-stopped
    #env_file:
    #  - .env
    environment:
      MEILI_NO_ANALYTICS: "true"
      HOARDER_VERSION: release
      NEXTAUTH_SECRET: <redacted>
      NEXTAUTH_URL: http://192.168.1.102:3123
      MEILI_MASTER_KEY: <redacted>
    volumes:
      - /data/docker/hoarder/meili-data:/meili_data

Steps to Reproduce

Create a very long note
Open the related preview using the arrows button

Expected Behaviour

The note is opened and scrollbars are shown (and working)

Screenshots or Additional Context

Screenshot of the note preview when it is opened (and scrollbars are not shown and not working):

Screenshot of the note after the browser has been refreshed (scrollbars are shown and are working):

Device Details

Chrome, Edge, Safari (iOS)

Exact Hoarder Version

v0.20.0

Have you checked the troubleshooting guide?

I have checked the troubleshooting guide and I haven't found a solution to my problem

Originally created by @esteve88 on GitHub (Dec 31, 2024). Original GitHub issue: https://github.com/karakeep-app/karakeep/issues/793 ### Describe the Bug When I'm opening the preview of a note from the main screen (using the expand button ![image](https://github.com/user-attachments/assets/aff9aa7b-3149-4eca-ac09-5199cdb13ade) ), in case of a long note, the note is not completely displayed and the scrollbar is neither displayed nor it is working. If I refresh the screen, then the note and the scrollbar are both visualized. This is happening on both Chrome and Edge (on Windows), as well as on Safari (from iOS). I'm using the latest Hoarder version (0.20.0) installed through Docker. I'm also copying here below my docker compose: ``` version: "3.8" services: web: image: ghcr.io/hoarder-app/hoarder:${HOARDER_VERSION:-release} restart: unless-stopped volumes: - /data/docker/hoarder/hoarder-data:/data ports: - 3123:3000 #env_file: # - .env environment: MEILI_ADDR: http://meilisearch:7700 BROWSER_WEB_URL: http://chrome:9222 OPENAI_API_KEY: <redacted> DATA_DIR: /data HOARDER_VERSION: release NEXTAUTH_SECRET: <redacted> NEXTAUTH_URL: http://192.168.1.102:3123 MEILI_MASTER_KEY: <redacted> chrome: image: gcr.io/zenika-hub/alpine-chrome:123 restart: unless-stopped command: - --no-sandbox - --disable-gpu - --disable-dev-shm-usage - --remote-debugging-address=0.0.0.0 - --remote-debugging-port=9222 - --hide-scrollbars meilisearch: image: getmeili/meilisearch:v1.11.1 restart: unless-stopped #env_file: # - .env environment: MEILI_NO_ANALYTICS: "true" HOARDER_VERSION: release NEXTAUTH_SECRET: <redacted> NEXTAUTH_URL: http://192.168.1.102:3123 MEILI_MASTER_KEY: <redacted> volumes: - /data/docker/hoarder/meili-data:/meili_data ``` ### Steps to Reproduce 1. Create a very long note 2. Open the related preview using the arrows button ### Expected Behaviour The note is opened and scrollbars are shown (and working) ### Screenshots or Additional Context Screenshot of the note preview when it is opened (and scrollbars are not shown and not working): ![image](https://github.com/user-attachments/assets/3c3a41cd-22e3-4e64-9066-d9213705785f) Screenshot of the note after the browser has been refreshed (scrollbars are shown and are working): ![image](https://github.com/user-attachments/assets/23ab371a-88dc-45de-a8f2-d6360eda5b40) ### Device Details Chrome, Edge, Safari (iOS) ### Exact Hoarder Version v0.20.0 ### Have you checked the troubleshooting guide? - [X] I have checked the troubleshooting guide and I haven't found a solution to my problem

kerem

2026-03-02 11:50:31 +03:00

closed this issue
added the
bug
label

kerem commented

2026-03-02 11:50:32 +03:00

Author

Owner

@esteve88 commented on GitHub (Dec 31, 2024):

Just to share some additional information I found on this. I discovered that the demo version does not have this issue and scrollbars are visible for long notes inside the preview.

By comparing the HTML of both websites (demo and mine), I discovered that my version has class overflow-hidden on the note div content, which the demo version does not have it.

If I remove the overflow-hidden class from the div above, then the scrollbar is shown correctly and the note content behaves just like on the demo website.

@esteve88 commented on GitHub (Dec 31, 2024): Just to share some additional information I found on this. I discovered that the [demo version](https://try.hoarder.app) does not have this issue and scrollbars are visible for long notes inside the preview. By comparing the HTML of both websites (demo and mine), I discovered that my version has class `overflow-hidden` on the note div content, which the demo version does not have it. ![image](https://github.com/user-attachments/assets/59683c55-5c16-41d6-bcde-483ab353dab8) If I remove the `overflow-hidden` class from the div above, then the scrollbar is shown correctly and the note content behaves just like on the demo website.

kerem commented

2026-03-02 11:50:32 +03:00

Author

Owner

@MohamedBassem commented on GitHub (Jan 5, 2025):

Thanks for the report @esteve88, this will be fixed in today's release.

@MohamedBassem commented on GitHub (Jan 5, 2025): Thanks for the report @esteve88, this will be fixed in today's release.

kerem referenced this issue

2026-03-02 11:58:33 +03:00

[PR #526] [CLOSED] Performance #517 #1644

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/karakeep#517

No description provided.

Rows
Columns