Empty row BUG when adding Categories

Jammode commented 4 months ago

Environment

Docker

Version

0.14.6

Describe the problem

In Edit Mode, the first time you add a Category, it works fine. It places it just below any App icons or widgets (no extra spacing or padding). Adding apps to that category, and out of that category works fine as well.

However, when adding a new Category (initially via Menu "Add Tile"), for some reason, there is a empty row below the 1st Category, then adds the new Category below this - Visually, it appears to add extra spacing between the 1st and 2nd categories.

Here is the empty/blank HTML entry being added: <div class="grid-stack grid-stack-wrapper min-row grid-stack-instance-1290 grid-stack-15 ui-droppable" data-wrapper="****" style="transition-duration: 0s; min-height: 95.1333px;" gs-current-row="1"></div>

This breaks the ability to move Categories (ie second Category - "Move Up" does nothing, and trying to move the first Category down doesn't work - because of the blank row HTML entry exists between them, it doesn't do anything).

App icons can be moved into the Blank row, but Categories cannot be re-ordered through it.

I haven't tested if adding additional App icons (not in categories) creates the empty row, or even just moving below the Category does this or not. However you can end up with a several categories separated by these extra spaced/empty HTML rows and not be able to re-order your categories.

It does appear that when dragging App icons below the (first) Category, it adds a HTML row so that the App icon can be placed (it adds extra blank rows if you move the App icon 2-3+ rows below the Category). However the issue appears to occur when placing the App Icon back (eg above the Category), the blank rows remain (they do not get removed if there are no other apps in the html rows below.

The correct action should be, to: 1) Delete any unused/empty rows that do not contain any app icons below them. This will ensure no empty rows exist and no spacing exists between the Categories. There should be no reason to have padding between the categories, so removing them is a tidy way to clean up unused and empty padding rows. If however the apps are padded, then the row the app icon is in and above shouldn't be removed even if empty, only empty ones below if no further App icons are found below it (removes any padding between Categories, and ensures no empty rows exist below the last valid row). 2) Allow Categories rows to be moved up or down even if there are blank rows / icon filled rows. This should fix the moving problem for Categories.

Logs

No response

Context

Showing 2 such rows between the main category (called "Main Dashboard") and the "New category" + there is a last blank row that may also cause issues when moving categories up/down, etc.

Image here

Please tick the boxes

[X] I confirm that I attached the proper logs
[X] I've read the docs
[X] I've checked for duplicate issues
[X] I've tried to debug myself

github-actions[bot] commented 4 months ago

Hi 👋. Thank you for submitting your first issue to Homarr. Please ensure that you've provided all nessesary information. You can use the three dots > Edit button to update your post with additional images and information. Depending on the current volume of requests, the team should get in conact with you shortly.

manuel-rw commented 4 months ago

The wrapper is normal and expected behaviour. But moving the categories should work anyway. We'll investigate this.

or-agami commented 3 months ago

I've also having weird issue with the categories, some have one empty space some don't and some have multiple. where there is more than one wrappers I can't move the category up or down

or-agami commented 2 months ago

I think the bug was introduced in one of the updates. After I manually edit of the board config to fix the wrappers:

Fixed the categories position
Fixed the wrappers position
Added "type": "category" to some of the categories (not sure if it's actually in use)

Board config before

```json "categories": [ { "id": "96f6c919-f0b8-4111-9dae-b005a33e15a4", "name": "Media 🍿", "position": 2 }, { "id": "45a000c4-c2fa-4622-9bf8-9106f2932e95", "name": "Apps 🎰", "position": 1, "type": "category" }, { "id": "87ea7b9a-f342-4c0f-b890-5dc380f354fc", "name": "Managment ⚒", "position": 3 }, { "id": "a3f89caa-3576-4be7-90db-781809b6619b", "name": "Network 🌐", "position": 6 }, { "id": "1a80598c-34db-4bef-8943-5ff728ee6e3e", "name": "Security 🔐", "position": 4, "type": "category" }, { "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f", "position": 7, "name": "Stats 📈", "type": "category" } ], "wrappers": [ { "id": "default", "position": 0 }, { "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a326", "position": 1 }, { "id": "2a292c3a-0dd5-4e7c-9465-2673d94d2a53", "position": 2 }, { "id": "1c845d81-8ad9-4278-9fab-6387ad3e0c0c", "position": 4 }, { "id": "604c0fec-e3fc-4af0-8aad-8de12bd27e8a", "position": 4 }, { "id": "45496348-83cd-4c25-b65d-ce51133e0c34", "position": 5 }, { "id": "fb337db3-c9d0-4305-8b67-2f512d3ea71b", "position": 7 } ], ```

Board config after

```json "categories": [ { "id": "45a000c4-c2fa-4622-9bf8-9106f2932e95", "name": "Apps 🎰", "position": 1, "type": "category" }, { "id": "96f6c919-f0b8-4111-9dae-b005a33e15a4", "name": "Media 🍿", "position": 2, "type": "category" }, { "id": "87ea7b9a-f342-4c0f-b890-5dc380f354fc", "name": "Managment ⚒", "position": 3, "type": "category" }, { "id": "1a80598c-34db-4bef-8943-5ff728ee6e3e", "name": "Security 🔐", "position": 4, "type": "category" }, { "id": "a3f89caa-3576-4be7-90db-781809b6619b", "name": "Network 🌐", "position": 5, "type": "category" }, { "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f", "position": 6, "name": "Stats 📈", "type": "category" } ], "wrappers": [ { "id": "default", "position": 0 }, { "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a326", "position": 1 }, { "id": "2a292c3a-0dd5-4e7c-9465-2673d94d2a53", "position": 2 }, { "id": "1c845d81-8ad9-4278-9fab-6387ad3e0c0c", "position": 3 }, { "id": "604c0fec-e3fc-4af0-8aad-8de12bd27e8a", "position": 4 }, { "id": "45496348-83cd-4c25-b65d-ce51133e0c34", "position": 5 }, { "id": "fb337db3-c9d0-4305-8b67-2f512d3ea71b", "position": 6 } ], ```

Now I can't recreate the issue. @manuel-rw maybe there was a migration job/function in one of the updates to change the config format? or maybe it was just a bug in one of the versions

Anyway it's working as expected now, no more uneven spaces 😮‍💨

@Jammode try to change the config manually as I did if you still has the issue, if you do, I recommend that you make a copy of config file before changing it

manuel-rw commented 2 months ago

This issue will be fixed for good after we migrate away from JSON. This will be done in 1.0 which should be released within the next weeks to 1-2 months. We're working on it as fast as we can but currently it lacks many core features of the current Homarr version.

ajnart / homarr