Skip to content

UI is buggy on smaller screens, e.g. iPhone 12 mini #2513

Closed

Description

@sergiu-fintineru
Image Image

Describe the bug
I cannot access the settings section in portrait mode. The 3 dot button is not functional.

Loop Report 2026-09-15 20:30:02+03:00.md

Activity

  1. changed the title [-]UI is buggy on smaller screens[/-] [+]UI is buggy on smaller screens, e.g. iPhone 12 mini[/+] on Sep 15, 2026
  2. sergiu-fintineru commented on Sep 15, 2026

    @sergiu-fintineru
    Author

    I have to rotate the screen in order to acces the settings cogwheel.
    I am running iOS 27.
    Dexcom ONE+ and Omnipod Dash pumps.

  3. sascha-egerer commented on Sep 15, 2026

    @sascha-egerer

    I’ve got the Same Problem. If I remember correctly, the Interface was different before I’ve updated to iOS27

  4. sergiu-fintineru commented on Sep 15, 2026

    @sergiu-fintineru
    Author

    I did both updates in the same time, meaning I updated my iPhone to iOS 27 and Loop to 3.14.7, I wasn't sure where the problem stemmed from. It's probably an issue with iOS 27 and the new interface rules.

  5. bastienmoulia commented on Sep 15, 2026

    @bastienmoulia

    On bigger screen (iPhone 17 Pro) it's better but still not centered and a bit small:
    image

  6. sascha-egerer commented on Sep 15, 2026

    @sascha-egerer

    I mean the Main Problem is Not that the dots are there, but the Problem is that the Button does just nothing :) Rotating the phone is my current workaround.

    And this is a iPhone 16 Pro by the way

    Image Image
  7. sergiu-fintineru commented on Sep 15, 2026

    @sergiu-fintineru
    Author

    The developers did warn us not to update yet to iOS 27, but we decided to take one for the team.
    Hopefully it will be resolved soon, the workaround is indeed to use the phone in landscape mode.

  8. ps2 commented on Sep 15, 2026

    @ps2
    Collaborator

    Thanks for the report — the screenshots and the Loop Report pinned this down.

    Your build is Loop v3.14.7 (57) off workspace main, which pins Loop 2b4cd9a2. There, the bottom bar is a UIToolbar with five items:

    let carbs    = UIBarButtonItem(customView: carbEntryButton)
    let bolus    = UIBarButtonItem(customView: bolusButton)
    let settings = UIBarButtonItem(customView: settingsButton)
    let preMeal  = createPreMealButtonItem(selected: false, isEnabled: true)
    let workout  = UIBarButtonItem(customView: workoutButton)
    
    if #available(iOS 26, *) {
        toolbarItems = [carbs, preMeal, bolus, workout, settings]
    }

    On iOS 26 a UIToolbar renders as the Liquid Glass pill and, when the items don't fit the width, moves the tail into a ··· overflow menu. At 375pt only three fit — which is why your portrait screenshot shows carbs, pre-meal and bolus, with workout and settings overflowed.

    The reason ··· does nothing is that four of those five are UIBarButtonItem(customView:). A custom-view item has no title, image or action for UIKit to build a menu entry from, so the overflow menu has nothing to show for them. Settings is last in the array, so it is the first thing you lose. (carbs.title = "Add Meal" is set just above — the only item that would survive.)

    The fix is to give those items menu-representable identities — title + image + primaryAction instead of customView — rather than trying to win back width.

    Two notes for anyone picking this up:

    • Correction: Increase spacing and size of main screen Liquid Glass toolbar icons #2504 is in this build. It merged to dev as squash commit c1c170a6 on 09-09, which is an ancestor of 2b4cd9a2 — the commit both main (v3.14.7) and dev pin. (An earlier version of this comment said it was not in main; I had checked the pre-squash branch SHAs, which the squash discarded.) It pads each icon to a 60×44 canvas, so 5 × 60 = 300pt of icon canvas plus toolbar insets. On a 360pt iPhone 12 mini simulator that still fits on iOS 26.5; on iOS 27.0 the same code overruns the screen. So iOS 27 exposed it, and Increase spacing and size of main screen Liquid Glass toolbar icons #2504's width is what tips it over.
    • next-dev is not affected. That bar was replaced with a UITabBar carrying four image+title items, and a bare UITabBar never creates a More item — that is UITabBarController behaviour. Confirmed on an iPhone 12 mini simulator at 360×780: all four tabs render with labels, no overflow, Settings reachable.

    In the meantime, landscape should give you access to settings, since all five items fit there.

    Fix: #2515.

  9. ps2 commented on Sep 17, 2026

    @ps2
    Collaborator

    Follow-up on the report of three items + ··· on an iPhone SE (3rd gen) on iOS 27 with #2515 applied: reproduced, and it is the SDK the app was built with, not the device.

    Same commit, same 375pt width, same iOS 27:

    device built with toolbar
    iPhone 12 mini Xcode 26.5 five fit
    iPhone 12 mini Xcode 27 three + ···
    iPhone SE 3rd gen Xcode 27 three + ···

    Linking against the iOS 27 SDK gives each bar button item wider padding on iOS 27. The browser builds are pinned to Xcode 26.5, so they were never affected; local Xcode 27 builds are. The ··· menu itself now works (Settings and Workout are in it), which was the bug here, but five items should fit.

    Fix in #2524 (33a05cb3): isPaddingRemoved on the five items, and visibilityPriority = .high on Settings so it is the last item to overflow rather than the first. Compiled only under Xcode 27 (the properties are SDK 27), since Xcode 26.5 builds already fit. Verified on iPhone SE (3rd generation) and iPhone 12 mini, iOS 27.0, Xcode 27 build: all five fit; iOS 26.5 unchanged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions