mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2026-05-30 23:40:40 +02:00
[Enhancement]: Mobile responsive web client #3007
Assignees
adam (Adam Melkus)
Clear assignees
adam (Adam Melkus)
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: starred/audiobookshelf#3007
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @Geordon on GitHub (Sep 17, 2025).
Type of Enhancement
Web Interface/Frontend
Describe the Feature/Enhancement
I occasionally want to manage my library while not at my computer. When I have my iPhone and use either Brave or Safari browser, the web pages are a challenge to work with.
My guess is that this might be achieved with CSS that takes into account the differences between desktop and mobile browsers, but my skills at web design peaked in the late 90s and never grew to include Java/JavaScript, let alone the black magic that is CSS.
Why would this be helpful?
I occasionally want to manage my library while not at my computer. When I have my iPhone and use either Brave or Safari browser, the web pages are a challenge to work with.
Future Implementation (Screenshot)
Ideally, the web client components would fit into the horizontal space, even if it requires shifting components down.
Audiobookshelf Server Version
2.29.0
Current Implementation (Screenshot)
This is what it currently looks like on my iPhone. Notice how some of the web page components are off of the screen to either side of the visible area. The page can't be scrolled to either side to make use of the components of the web client.
Additionally, this is when trying to manage/edit library items on the default ABS web client. The web client player is satisfactory.
<edit: Removed incorrect screenshot>
@Vito0912 commented on GitHub (Sep 17, 2025):
Is this the default ABS?
I can't say for sure about iOS, because I never used the PWA with it.
But at least on Android such a view does not exist (or if I never found it lol)
@nichwall commented on GitHub (Sep 17, 2025):
As Vito mentioned this does not look like the ABS web client for either a desktop browser or the mobile view. I have attached a screenshot from the web client of ABS in Brave on Android. I haven't ever seen any screenshots shared of the web client that look like that.
Can you confirm how you are accessing the web client? Are you sure this is not a 3rd party app?
@Geordon commented on GitHub (Sep 17, 2025):
Ugh, that's the wrong screenshot. My apologies.
@Geordon commented on GitHub (Sep 17, 2025):
Again, this is when trying to edit library entries. The player is satisfactory, but there are times that I want to work on updating my library items when not at my computer.
@sir-wilhelm commented on GitHub (Sep 17, 2025):
That image looks like you might have pinch zoomed in on the web page. Maybe it's at the default zoom, but on my android device using Brave I have to zoom in to get the mobile page to look like that.
What device are you using, maybe on older/lower res devices it's cut off?
@Geordon commented on GitHub (Sep 17, 2025):
Good thought, but it's not zoomed (I even tried to zoom out, it didn't do anything useful, the screen shrank then popped back to the same size shown), but I can zoom in on some of the editing pages but not others. This is on an iPhone 13 Pro, with the latest iOS, whatever they are calling it... iOS 26?
@advplyr commented on GitHub (Sep 17, 2025):
It definitely shouldn't be overflowing like that. I'm not able to reproduce this on an iPhone 15 (iOS 18.6.2) or Google Pixel 9a using Brave.
@Geordon commented on GitHub (Sep 17, 2025):
Iphone 13 Pro, IOS 26.0 if that helps. Also happens in Safari. I thought it might be due to me having Larger Accessibility Text Size turned on, but it still happened when it is turned off.
@Vito0912 commented on GitHub (Sep 17, 2025):
I just tested it with my iPad (iPadOS 26) where even the smallest window size was still displayed correctly. Not very user-friendly, but still inside the boundaries.
Do you maybe have any other accessibility options enabled that could lead to such behaviour ?
@Geordon commented on GitHub (Sep 17, 2025):
Another excellent question. I just checked on my iPhone and iPad (both running os 26) and the iPad displays both the editing panel and player page appropriately in both portrait and landscape orientations.
The iPhone displays the player appropriately, but the editor is showing as above. The only accessibility feature enabled on the iPhone is the previously mentioned adaptive text size increase. I disabled the setting and restarted the phone and the issue is still present. I've got no idea what else I could try, because as far as I can tell, everything is the same from my iPad to my iPhone, including the OS version and the Brave version.