layout.style: row not respected for some groups in settings?

[aalexanderr]

Description

So I've been using homepage for some time, came back to config files to do some cleanup and add some widgets and I'm having a weird issue... new groups (Office, Downloads) that I added are not respecting the style: row and are showing up as default column instead.

Expected for them to be rows.

homepage version

v0.9.11 (2245cdd, Oct 15, 2024) docker:"sha256:1ad345fd770c901160c74b74f60f8131654fef56614c8bbaa05298ee5ceced1b"

Installation method

Docker

Configuration

for brevity i piped those files through grep -ve ^# and for privacy sed s/myrealdomain/domain/

rest of the files are empty (apart from --- starting line and comments) - those are:
bookmarks.yaml,docker.yaml,kubernetes.yaml

custom.js and custom.css are completely empty

settings.yaml:

title: Home
startUrl: https://dom.domain.lol
base: https://dom.domain.lol
background:
  image: /images/pexels-felix-mittermeier-956999.jpg
  #blur: sm # sm, "", md, xl... 
  saturate: 50 # 0, 50, 100...
  #brightness: 50 # 0, 50, 75...
  opacity: 50 # 0-100
favicon: /images/favicon.ico
headerStyle: boxedWidgets
theme: dark
color: slate
useEqualHeights: true
#fiveColumns: true
layout:
  - Entertainment:
      tab: Main
      style: row
      columns: 5
      disableCollapse: true
      header: false
  - Office:
      tab: Main
      style: row
      colums: 5
      #initiallyCollapsed: true
      #disableCollapse: true
      #header: false
  - Downloads:
      tab: Main
      style: row
      colums: 5
      disableCollapse: true
      #header: false
  - Privacy:
      tab: Main
      style: row
      columns: 5
      disableCollapse: true
      #header: false
  - Home:
      tab: Main
      style: row
      columns: 5
      disableCollapse: true
      #header: false
  - "Calendar Widget":
      tab: Main
      disableCollapse: true
      header: false
  - "Media Widgets":
      tab: Main
      disableCollapse: true
      header: false
# manage tab
  - Networking:
      tab: Manage
      style: row
      columns: 5
      disableCollapse: true
  - DevOps:
      style: row
      columns: 5
      tab: Manage
      disableCollapse: true
  - Monitoring:
      style: row
      tab: Manage
      columns: 5
      disableCollapse: true
  - Arr:
      style: row
      tab: Manage
      columns: 5
      disableCollapse: true

config/services.yaml looks like this:

---
- Entertainment:
  - Jellyfin:
      icon: sh-jellyfin.png
      href: https://jellyfin.domain.lol/
      ping: http://jellyfin
      description: Media player
      widget:
        type: jellyfin
        url: http://jellyfin:8096
        key: {{HOMEPAGE_FILE_JELLYFIN_TOKEN}}
        enableBlocks: true
        enableNowPlaying: false
  - Jellyseerr:
      icon: sh-jellyseerr.png
      href: https://jellyseerr.domain.lol/
      ping: http://jellyseerr
      description: Media requests
      widget:
        type: jellyseerr
        url: http://jellyseerr:5055
        key: {{HOMEPAGE_FILE_JELLYSEERR_TOKEN}}
  - AudioBookShelf:
      icon: sh-audiobookshelf.png
      href: https://audiobookshelf.domain.lol/
      ping: http://audiobookshelf
      description: AudioBooks
      widget:
        type: audiobookshelf
        url: http://audiobookshelf:80
        key: {{HOMEPAGE_FILE_AUDIOBOOKSHELF_TOKEN}}
  - Kavita:
      icon: sh-kavita.png
      href: https://kavita.domain.lol/
      ping: http://kavita
      description: Ebooks & Comics
  - RomM:
      icon: sh-romm.png
      href: https://romm.domain.lol/
      ping: http://romm
      description: Retro games
  - Navidrome:
      icon: sh-navidrome
      href: https://navidrome.domain.lol/
      ping: http://navidrome
      description: Music
  - Watcharr:
      icon: sh-watcharr.png
      href: https://watcharr.domain.lol/
      ping: http://watcharr
      description: Tracking watched stuff
  - GameVault:
      icon: sh-gamevault.png
      href: https://gamevault.domain.lol/
      ping: http://gamevault
      description: Local Steam
  - FoundryVTT:
      icon: sh-foundry-virtual-tabletop.png
      href: https://foundryvtt.domain.lol
      ping: http://foundryvtt
      description: Virtual Table Top
  - Free Games Claimer:
      icon: /icons/free-games-claimer.png
      ping: http://freegamesclaimer
      description: Free Games Claimer

- Office:
  - Cypht:
      icon: /icons/cypht.png
      href: https://cypht.domain.lol/
      ping: http://cypht
      description: E-mail
  - OpenOffice:
      icon: /icons/onlyoffice.png
      href: https://openoffice.domain.lol/
      ping: http://openoffice
      description: Office suite
  - Joplin:
      icon: sh-joplin.png
      href: https://joplin.domain.lol/
      ping: http://joplin
      description: Notes
  - Paperless-ngx:
      icon: sh-paperless-ngx.png
      href: https://paperless.domain.lol/
      ping: http://paperless
      description: Documents
  - Vaultwarden:
      icon: sh-vaultwarden.png
      href: https://vw.domain.lol/
      ping: http://vaultwarden
      description: Passwords
  - PhotoPrism:
      icon: sh-photoprism.png
      href: https://photoprism.domain.lol/
      ping: http://photoprism
      description: Pictures
  - Syncthing:
      icon: sh-syncthing.png
      href: https://syncthing.domain.lol/
      ping: http://syncthing
      description: Data synchronisation
  - Wallabag:
      icon: sh-wallabag.png
      href: https://wallabag.domain.lol/
      ping: http://wallabag
      description: Article extractor
  - Scan:
      icon: sh-brother.png
      href: https://skaner.domain.lol/
      ping: http://scanservejs
      description: Scanner
  - Leon:
      icon: /icons/leon.svg
      href: https://leon.domain.lol/
      ping: http://leon
      description: AI Personal Assistant
  - Open-WebAI:
      icon: /icons/open-webui.png
      href: https://ai.domain.lol/
      ping: http://aiweb
      description: AGI

- Privacy:
  - Whoogle:
      icon: sh-whoogle.png
      href: https://whoogle.domain.lol/
      ping: http://whoogle
      description: Search
  - Invidious:
      icon: sh-invidious.png
      href: https://invidious.domain.lol/
      ping: http://invidious
      description: Youtube front
- Home:
  - Mealie:
      icon: sh-mealie.png
      href: https://mealie.domain.lol/
      ping: http://mealie
      description: Recipes
  - HortusFox:
      icon: sh-hortusfox.png
      href: https://hortusfox.domain.lol/
      ping: http://hortusfox
      description: Plants
  - Shelf:
      icon: /icons/shelf.png
      href: https://shelf.domain.lol/
      ping: http://shelf
      description: Assets
  - Shiori:
      icon: sh-shiori
      href: https://shiori.domain.lol/
      ping: http://shiori
      description: Bookmarks
  - Receipt-Wrangler:
      icon: sh-receipt-wrangler.png
      href: https://receipts.domain.lol/
      ping: http://receipts
      description: Receipts
  - Firefly:
      icon: sh-firefly-iii.png
      href: https://firefly.domain.lol/
      ping: http://firefly
      description: Finances

- Downloads:
  - MeTube:
      icon: sh-metube.png
      href: https://metube.domain.lol/
      ping: http://metube
      description: YouTube archiver
  - AriaNG:
      icon: mdi-download-box-outline
      href: https://ariang.domain.lol/
      ping: http://ariang
      description: Downloader

- Calendar Widget:
  - Calendar:
      widget:
        type: calendar
        firstDayInWeek: monday
        view: monthly
        maxEvents: 50
        showTime: true
        timezone: {{HOMEPAGE_VAR_TIMEZONE}}
        integrations:
          - type: ical
            url: http://gluetun:7878/feed/v3/calendar/Radarr.ics?apikey={{HOMEPAGE_FILE_RADARR_KEY}}
            name: Movie
            color: yellow
            params:
              showName: true
          - type: ical
            url: http://gluetun:8989/feed/v3/calendar/Sonarr.ics?apikey={{HOMEPAGE_FILE_SONARR_KEY}}
            name: Series
            color: teal
            params:
              showName: true

- Media Widgets:
  - Watching:
      icon: sh-jellyfin.png
      widget:
        type: jellyfin
        url: http://jellyfin:8096
        key: {{HOMEPAGE_FILE_JELLYFIN_TOKEN}}
        enableBlocks: false
        enableNowPlaying: true
  - Listening:
      icon: sh-navidrome
      widget:
        type: navidrome
        url: http://navidrome:4533
        user: {{HOMEPAGE_FILE_NAVIDROME_USER}}
        token: {{HOMEPAGE_FILE_NAVIDROME_TOKEN}}
        salt: {{HOMEPAGE_FILE_NAVIDROME_SALT}}

- Networking:
  - OpnSense:
      icon: opnsense.png
      href: https://router.domain.lol
      ping: https://router.domain.lol
      description: OpnSense - Router, Firewall
  - Switch Netgear:
      icon: sh-netgear
      href: https://netgear.domain.lol
      ping: https://netgear.domain.lol
      description: Netgear Managed Switch
  - WLAN-AP:
      icon: sh-tp-link.png
      href: https://archerax50.domain.lol
      ping: https://archerax50.domain.lol
      description: TP-Link Archer AX50 WiFi AP

- DevOps:
  - Gitea:
      icon: gitea.png
      href: https://gitea.domain.lol
      ping: https://gitea.domain.lol
      description: Git repositories
  - Harbor:
      icon: harbor.png
      href: https://harbor.domain.lol/
      ping: https://harbor.domain.lol/
      description: Registry
  - HashiCorp Vault:
      icon: sh-hashicorp-vault.png
      href: https://vault.domain.lol/
      ping: https://vault.domain.lol/
      description: Secrets Vault
  - IT-Tools:
      icon: sh-it-tools.png
      href: https://it-tools.domain.lol/
      ping: https://it-tools.domain.lol/
      description: Swiss army knife
  - MermaidJS:
      icon: /icons/mermaid-js.svg
      href: https://mermaidjs.domain.lol/
      ping: https://mermaidjs.domain.lol/
      description: Graph creator
  - DokuWiki:
      icon: dokuwiki.png
      href: https://dokuwiki.domain.lol/
      ping: https://dokuwiki.domain.lol/
      description: HomeLab documentation
  - Semaphore:
      icon: semaphore.png
      href: https://semaphore.domain.lol/
      ping: https://semaphore.domain.lol/
      description: Ansible & Terraform UI

- Monitoring:
  - Grafana:
      icon: grafana.png
      href: https://grafana.domain.lol
      ping: https://grafana.domain.lol
      description: Dashboards
  - Loki:
      icon: loki.png
      href: https://loki.domain.lol
      ping: https://loki.domain.lol
      description: Logs aggregation
  - Tempo:
      icon: /icons/tempo.png
      href: https://tempo.domain.lol
      ping: https://tempo.domain.lol
      description: Tracing backend
  - Prometheus:
      icon: prometheus.png
      href: https://prometheus.domain.lol
      ping: https://prometheus.domain.lol
      description: Metrics processing
  - InfluxDB:
      icon: influxdb.png
      href: https://influxdb.domain.lol
      ping: https://influxdb.domain.lol
      description: Time series db

- Arr:
  - Gluetun:
      icon: sh-mullvad-vpn.png
      widget:
        type: gluetun
        url: http://gluetun:8000
  - qBittorrent:
      icon: sh-qbittorrent.png
      href: https://qbittorrent.domain.lol/
      ping: http://gluetun:8200
      description: BitTorrent client
      widget:
        type: qbittorrent
        url: http://gluetun:8200
  - SABnzbd:
      icon: sh-sabnzbd.png
      href: https://sabnzbd.domain.lol/
      ping: http://gluetun:8100
      description: Usenet downloader
      widget:
        type: sabnzbd
        url: http://gluetun:8100
        key: {{HOMEPAGE_FILE_SABNZBD_KEY}}
  - Prowlarr:
      icon: sh-prowlarr.png
      href: https://prowlarr.domain.lol/
      ping: http://gluetun:9696
      description: Indexer/proxy manager
      widget:
        type: prowlarr
        url: http://gluetun:9696
        key: {{HOMEPAGE_FILE_PROWLARR_KEY}}
  - Sonarr:
      icon: sh-sonarr.png
      href: https://sonarr.domain.lol/
      ping: http://gluetun:8989
      description: Indexer TV Shows
      widget:
        type: sonarr
        url: http://gluetun:8989
        key: {{HOMEPAGE_FILE_SONARR_KEY}}
  - Radarr: 
      icon: sh-radarr.png
      href: https://radarr.domain.lol/
      ping: http://gluetun:7878
      description: Movies
      widget:
        type: radarr
        url: http://gluetun:7878
        key: {{HOMEPAGE_FILE_RADARR_KEY}}
  - Lidarr:
      icon: sh-lidarr.png
      href: https://lidarr.domain.lol/
      ping: http://gluetun:8686
      description: Music
      widget:
        type: lidarr
        url: http://gluetun:8686
        key: {{HOMEPAGE_FILE_LIDARR_KEY}}
  - Readarr:
      icon: sh-readarr.png
      href: https://readarr.domain.lol/
      ping: http://gluetun:8787
      description: Books
      widget:
        type: readarr
        url: http://gluetun:8787
        key: {{HOMEPAGE_FILE_READARR_KEY}}
  - Bazarr:
      icon: sh-bazarr.png
      href: https://bazarr.domain.lol/
      ping: http://gluetun:6767
      description: Subtitles
      widget:
        type: bazarr
        url: http://gluetun:6767
        key: {{HOMEPAGE_FILE_BAZARR_KEY}}
  - Mylar:
      icon: sh-mylar3.png
      href: https://mylar.domain.lol/
      ping: http://gluetun:8090
      description: Comic Books
      widget:
        type: mylar
        url: http://gluetun:8090
        key: {{HOMEPAGE_FILE_MYLAR_KEY}}

config/widgets.yaml:

---
# https://gethomepage.dev/latest/configs/service-widgets
- search:
    focus: true
    provider: [duckduckgo]
    target: _blank

- weatherapi:
    label: {{HOMEPAGE_VAR_WEATHER_LABEL}}
    latitude: {{HOMEPAGE_VAR_WEATHER_LAT}}
    longitude: {{HOMEPAGE_VAR_WEATHER_LAT}}
    units: metric
    apiKey: {{HOMEPAGE_FILE_WEATHER_KEY}}
    cache: 30 # Time in minutes to cache API responses, to stay within limits

lastly, even though it should not have any impact here...
docker service file homepage.yml

services:
  homepage:
    image: ghcr.io/gethomepage/homepage:latest
    container_name: homepage
    restart: unless-stopped
    volumes:
      - ${CONFIGS_DIR:?err}/homepage/config:/app/config
      - ${CONFIGS_DIR:?err}/homepage/images:/app/public/images
      - ${CONFIGS_DIR:?err}/homepage/icons:/app/public/icons
    environment:
      - PUID=${PUID:?err}
      - PGID=${PGID:?err}
      - TZ=${TIMEZONE:?err}
      - LOG_LEVEL=DEBUG #TODO: remove this line
      - HOMEPAGE_VAR_TIMEZONE=${TIMEZONE:?err}
      - HOMEPAGE_VAR_WEATHER_LABEL=${WEATHER_LABEL:?err}
      - HOMEPAGE_VAR_WEATHER_LON=${WEATHER_LON:?err}
      - HOMEPAGE_VAR_WEATHER_LAT=${WEATHER_LAT:?err}
      - HOMEPAGE_FILE_JELLYFIN_TOKEN=/run/secrets/jellyfin_token
      - HOMEPAGE_FILE_JELLYSEERR_TOKEN=/run/secrets/jellyseerr_token
      - HOMEPAGE_FILE_AUDIOBOOKSHELF_TOKEN=/run/secrets/audiobookshelf_token
      - HOMEPAGE_FILE_NAVIDROME_USER=/run/secrets/navidrome_user
      - HOMEPAGE_FILE_NAVIDROME_TOKEN=/run/secrets/navidrome_token
      - HOMEPAGE_FILE_NAVIDROME_SALT=/run/secrets/navidrome_salt
      - HOMEPAGE_FILE_KAVITA_USER=/run/secrets/kavita_user
      - HOMEPAGE_FILE_KAVITA_PASSWORD=/run/secrets/kavita_password
      - HOMEPAGE_FILE_ROMM_USER=/run/secrets/romm_user
      - HOMEPAGE_FILE_ROMM_PASSWORD=/run/secrets/romm_password
      - HOMEPAGE_FILE_SABNZBD_KEY=/run/secrets/sabnzbd_key
      - HOMEPAGE_FILE_PROWLARR_KEY=/run/secrets/prowlarr_key
      - HOMEPAGE_FILE_SONARR_KEY=/run/secrets/sonarr_key
      - HOMEPAGE_FILE_RADARR_KEY=/run/secrets/radarr_key
      - HOMEPAGE_FILE_LIDARR_KEY=/run/secrets/lidarr_key
      - HOMEPAGE_FILE_READARR_KEY=/run/secrets/readarr_key
      - HOMEPAGE_FILE_BAZARR_KEY=/run/secrets/bazarr_key
      - HOMEPAGE_FILE_WEATHER_KEY=/run/secrets/weather_key
    secrets:
      - jellyfin_token
      - jellyseerr_token
      - audiobookshelf_token
      - navidrome_user
      - navidrome_token
      - navidrome_salt
      - kavita_user
      - kavita_password
      - romm_user
      - romm_password
      - sabnzbd_key
      - prowlarr_key
      - sonarr_key
      - radarr_key
      - lidarr_key
      - readarr_key
      - bazarr_key
      - weather_key
    networks:
      - nginx-proxy-network
    ports:
      - "${WEBUI_HOMEPAGE_PORT:?err}:3000"

Container Logs

even with LOG_LEVEL=DEBUG set its just this, I assume due to NODE_ENV=production set by default
I've execed into the container and checked if the env is set and indeed it is

Listening on port 3000

log file in container is empty:

$ cat configs/homepage/config/logs/homepage.log
$

Browser Logs

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. markup.js:250:53

Troubleshooting

1. Checked if there are any name overlaps between groups/services/anything other and couldnt find any
2. Checked for any whitespace issues in vim :set listchars=eol:¬,tab:>·,trail:~,extends:>,precedes:<,space:␣
3. Tried renaming groups, quoting names with spaces when the first word could be duplicate of a service name
4. Moved settings.layout children from map to list but it did not change anything
5. Container restart, container recreate (docker stop $cnt && docker rm $cnt && run my normal docker compose up -d)
6. Explicitly added style: columns for both columns that use it - didnt help
7. Deployed on local machine to check if it will reproduce - it did, screenshot attached:
   

Additionally for ease of reproduction here is a zip with compose, empty secret files and configuration (same as above)
homepage-compose-test.zip

docker compose --env-file main.env --file compose.yml up -d

[aalexanderr]

what is interesting is that Privacy group is also new but it is displayed as row correctly

[vhsdream]

Might want to check your spelling of the word "columns" 😉

[aalexanderr]

im blind, god damn it, thank you @vhsdream

[github-actions[bot]]

This discussion has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns. See our contributing guidelines for more details.