Cloudron 9.0 (beta) bug reports

[hexbin]

@luckow @necrevistonnezr "untamed" either way

[hexbin]

@nebulon Some UX-friendly approaches for the several table-related issues:

• Scrollable table wrappers (check)
• Consequently (tables can grow infinitely wide) limit column lengths with CSS to a readable size, e. g. max-width: 40ch; word-wrap: break-word;
• Consequently (rows can then have variable heights) top-align table cells
• Support orientation in table rows with either alternating backgrounds or subtle horizontal borders (hover bg is already helpful - but only when your device has a hover state)
• Wrap all concatenated data with markup (like group names in the users table, unlike aliases in the mailbox table) - reserving us the option to set entries inline or stacked. Ideally, use invisible list markup - commas can be added with CSS

[hexbin]

Available screen space

Still focusing on tables, but to consider in general:

• When the task focus is on working with complex tables, the space should not be limited for the sake of the design

-> Let the content width be a subject of user preference: make .content max-width (900px) class-dependent and offer a per-user or per-session toggle to swap a body class. The design looks good without the max-width, so there's really not much to change

• Sidebar consumes too much space in narrow viewports (already mentioned here in this thread)

-> Option to reduce the sidebar width to the width of the icons (see Discourse or GitLab

[nebulon]

@hexbin thanks a lot for the detailed info. We have reworked those table columns with better widths then and also made some of the tables table-layout: fixed; to actually be able to control that overflow behavior.

For "Wrap all concatenated data with markup", is this similar to the custom option to overwrite style based on user adding custom css? We currently don't have that option to customize like that, but it was also requested for other things already.

Finally for the sidebar, we will see how to make that collapsable. It would certainly help on "nowadays" laptops around the 14" screens.

[humptydumpty]

Thank you for adding a "back" button on login pages. I keep my tabs pinned and that causes the OIDC string to expire and I had to manually delete that string from the URL. Now, I can simply click on back and then sign in. Less hassle now.

[robi]

Is it time to revisit my list of ~20 UX issues?

[humptydumpty]

One more suggestion if I may. Clear the search box when you click on the logo in the top left.

Use case: You search for an app. To see the rest of your apps, you have to delete what you searched for or refresh the page which has a "reload" time and isn't instant. Clearing the input search box by pressing on the logo is faster and feels more natural.

Edit: Chatgpt spat out this code, don't shoot me

Clear search when clicking the Cloudron logo

// Clears the dashboard search field on logo click or ESC key
function enableClearSearchIntegration() {
  const searchInput = document.querySelector('input.pankow-text-input[placeholder="Search Apps"]');
  const logo = document.querySelector('.sidebar-logo');

  if (!searchInput) return;

  // ---- LOGO CLICK HANDLER ----
  if (logo && !logo.dataset._cloudronClearSearch) {
    logo.dataset._cloudronClearSearch = "1";

    logo.addEventListener("click", () => {
      clearSearch(searchInput);
    }, true);
  }

  // ---- ESC KEY HANDLER ----
  if (!window._cloudronClearSearchEsc) {
    window._cloudronClearSearchEsc = true;

    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape") {
        clearSearch(searchInput);
      }
    });
  }
}

// Clears the input and triggers Cloudron filtering
function clearSearch(searchInput) {
  searchInput.value = "";
  searchInput.dispatchEvent(new Event("input", { bubbles: true }));
  searchInput.dispatchEvent(new Event("change", { bubbles: true }));
}

// Run once on initial load
enableClearSearchIntegration();

// Re-run when the SPA updates the DOM (Cloudron dashboard is an SPA)
const observer = new MutationObserver(enableClearSearchIntegration);
observer.observe(document.body, { childList: true, subtree: true });

Edit 2: fixed the code as we didn't use the right class selector for the logo. I tested it in the console and the code works as intended!
Edit 3: fixed the code again to use the proper selector for the search box. NOW it's ready
Edit 4: added support for escape key clear action thanks @robi

[robi]

@humptydumpty use if the Esc key is also a good way.

[humptydumpty]

@robi code revised and escape key support added

[scooke]

Here's weird bug. Many of my apps have the green arrow indicating an update. So I go to the app and update it... it restarts... and the green arrow persists. Some apps need "updating" 2 times, some need three times, before the green arrow goes away. I've tried refreshing the page in between, but that green arrow persists. Previously on 8 (I forget which version but almost all of them) an app would have the green arrow, but if it had been updated already, pressing the Update button would produce an error message that the app can't be downgraded. Now, on 9.0.12, these apps just keep updating until the green arrow disappears (so far, NEVER after one update).

EDIT: I noticed that the update process was trying to backup the app to a non-existent destination (I had changed), and thus, it appears, the Update process would just fail, or stop, at that point with no notice or alert or anything. So I fixed that, and the apps backed up, and THEN, for some of them, the green arrow would persist, but in this case it was accurate because another update was indeed waiting (e.g, git went from 137.1 to 1.37.2). But, at least two had the backups work but are still showing a green arrow with the same version showing as the previous attempt (1 WP and Bookstack).

[fbartels]

I have not seen it reported here and am also not able to reproduce it on the demo system, but when i search for an app and enter the second character the dashboard breaks with a javascript error.

utils-Cb1Rvih8.js:548 Already activated
index-D64usbhx.js:41926 Cloudron dashboard v9.0.13
index-D64usbhx.js:781 image loading failed, try to load /img/appicon_fallback.png
index-D64usbhx.js:781 image loading failed, try to load /img/appicon_fallback.png
style-D04uIdi2.js:2200 TypeError: Cannot read properties of undefined (reading 'toLocaleLowerCase')
    at index-D64usbhx.js:2339:295
    at wrappedFn (style-D04uIdi2.js:1051:19)
    at Array.filter (<anonymous>)
    at apply$1 (style-D04uIdi2.js:1059:27)
    at Proxy.filter (style-D04uIdi2.js:930:12)
    at ComputedRefImpl.fn (index-D64usbhx.js:2335:25)
    at refreshComputed (style-D04uIdi2.js:614:29)
    at get value (style-D04uIdi2.js:1740:5)
    at Proxy.<anonymous> (index-D64usbhx.js:2525:45)
    at renderComponentRoot (style-D04uIdi2.js:5499:17)
logError @ style-D04uIdi2.js:2200
handleError @ style-D04uIdi2.js:2194
renderComponentRoot @ style-D04uIdi2.js:5533
componentUpdateFn @ style-D04uIdi2.js:6728
run @ style-D04uIdi2.js:465
runIfDirty @ style-D04uIdi2.js:498
callWithErrorHandling @ style-D04uIdi2.js:2142
flushJobs @ style-D04uIdi2.js:2313
Promise.then
queueFlush @ style-D04uIdi2.js:2245
queueJob @ style-D04uIdi2.js:2240
effect2.scheduler @ style-D04uIdi2.js:6764
trigger @ style-D04uIdi2.js:488
endBatch @ style-D04uIdi2.js:546
notify @ style-D04uIdi2.js:779
trigger @ style-D04uIdi2.js:766
set value @ style-D04uIdi2.js:1589
createVNode.onUpdate:modelValue._cache.<computed>._cache.<computed> @ index-D64usbhx.js:2477
callWithErrorHandling @ style-D04uIdi2.js:2142
callWithAsyncErrorHandling @ style-D04uIdi2.js:2149
emit @ style-D04uIdi2.js:5388
set @ style-D04uIdi2.js:5341
set value @ style-D04uIdi2.js:1635
createElementBlock.onUpdate:modelValue._cache.<computed>._cache.<computed> @ style-D04uIdi2.js:16237
(anonymous) @ style-D04uIdi2.js:10083