Would be nice if both top and bottom menus had a similar way of showing the active icon.
For the top menu, the horizontal line is cut under the active icon.
(I would personally prefer the way the top menu does it, as, on my Kobo, a partial refresh, when a big block of black disappears, leaves the new text at its place a bit lighter than the other text that was not under black, so I guess i would feel the need to do a full refresh after closing bottom menu to restore balance :)
(Haven't looked at how possible or hard it is.)

For the top menu, the horizontal line is cut under the active icon.

Not just that. It also has the lines on the side. ;-)

I'll have to try this on my device, but I suspect that rather than a plain invert I would prefer a dark gray like in the MultiSelects (or whatever they're called) in the menu itself. If we choose to go for this style, that is.

Better?

I think the matching grey indicator is a little more consistent and obvious, but the last approach also is consistent with the top menu treatment.

Looks okay but we're still missing scaling on the lines on the very top and very bottom. Could you do those as well? :-)

@poire-z Btw, I don't think those ImageWidgets are scaling properly?

Edit: @robert00s Not a typo this time; @poire-z is responsible for the most recent ImageWidget changes. ;-)

I don't have a monitor big enough to reproduce what you show :)
IconButton have a scale_for_dpi = true parameter. Do you get different results if you add it and set to false or true in

Also, I don't know much about dpi mathematics, but when I checked the following, I think I remember it was multiplying by 2 at most:

@poire-z I get what looks like good results by removing the flooring.

--- a/frontend/ui/widget/imagewidget.lua
+++ b/frontend/ui/widget/imagewidget.lua
@@ -177,9 +177,9 @@ function ImageWidget:_render()
 
     -- scale_for_dpi setting: update scale_factor (even if not set) with it
     if self.scale_for_dpi then
+        local size_scale = math.min(Screen:getWidth(), Screen:getHeight())/600
         local dpi_scale = Screen:getDPI() / 167
-        -- rounding off to power of 2 to avoid alias with pow(2, floor(log(x)/log(2))
-        dpi_scale = math.pow(2, math.max(0, math.floor(math.log(dpi_scale)/0.69)))
+        dpi_scale = math.pow(2, math.max(0, math.log((size_scale+dpi_scale)/2)/0.69))
         if self.scale_factor == nil then
             self.scale_factor = 1
         end
diff --git a/test b/test

Before

After

Edit:

Doesn't look too shabby with a custom DPI either, although it has some beauty flaws (not the ImageWidget, but the GUI in general).

Well, I don't really get dpi arithmetics :)
But your changes looks the same on the emulator, but are way to big on my kobo:

(it looks more monstruous on the device that it does on this reduced screenshot)
Original, which I prefer:

@Frenzie
Could you check now?
I wonder if this line:

Yes, that is good. But like you said, don't do it in ConfigDialog and fix FrameContainer instead. 👍

Thanks!

Noticed 2 things: icons move a few pixels left or right upon selection/unselection, and the selected icon looks to me a bit tight between its 2 vertical lines.
I'm having a try at spreading the spacing between icons into some padding between icon and vertical lines.

Could you make sure the padding is touchable? The top menu also wants that treatment. ;-)