fix: override NcAppContent flex-basis to fix square iframe on mobile portrait

[PawelZera]

Problem

On narrow portrait screens (e.g. phone held vertically), the embedded Roundcube iframe appears almost square instead of filling the available height.

Root cause

NcAppContent from @nextcloud/vue applies a scoped style:

.app-content { flex-basis: 100vw; }

The .app-container in App.vue uses flex-direction: column, so flex-basis governs the height axis. On a 482 × 835 device this gives main#app-content-vue a computed height of ~482 px (= viewport width), yielding an almost-square content area.

RoundCubeWrapper then uses a ResizeObserver that faithfully copies container dimensions onto the iframe via inline style.width/height, so the square propagates all the way to the <iframe>.

Debugging evidence (Edge DevTools on mobile)

main#app-content-vue  rect: 466 × 482   computed flex: 0 1 482px   flex-basis: 482px
#content-vue          rect: 466 × 777   (correct full height)
iframe                style="width: 466px; height: 482px;"

After manually setting flex: 1 1 auto; flex-basis: auto on main#app-content-vue in DevTools the layout immediately recovered to full height (835 px), confirming the cause.

Fix

Add a scoped :deep() override in App.vue that resets flex-basis to auto and enforces flex: 1 1 auto on the content container:

:deep(.#{$roundCubeAppName}-content-container.app-content) {
  flex: 1 1 auto !important;
  flex-basis: auto !important;
  min-height: 0 !important;
}

This is intentionally scoped to the app-specific class so it does not interfere with other Nextcloud apps.

Testing

• Open the RoundCube app in Nextcloud on a phone (portrait orientation)
• Before fix: iframe is square (~viewport-width × viewport-width)
• After fix: iframe fills the full available height correctly
• Desktop layout is unaffected