Nextcloud Mail App horizontal layout - For use in the custom css app

horizontal.css

@media only screen and (min-width: 768px) {
  .app-mail #app-navigation {
    min-width: 250px !important;
  }
  #mail-new-message-fixed, #app-navigation-accounts, .app-mail #app #app-navigation #app-settings #app-settings-header, .app-mail #app #app-navigation #app-settings #app-settings-content {
    width: 300px !important;
  }
  .app-mail #app-content {
    height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    overflow-x: hidden;
  }
  .app-mail #app-content #app-content-wrapper {
    flex-direction: column;
    overflow: hidden;
  }
  .app-mail #app-content #app-content-wrapper .app-content-list {
    top: auto !important;
    width: auto !important;
    max-width: 100vw !important;
    min-height: 10% !important;
    height: 30%;
    border-right: none !important;
    border-bottom: 4px solid #ebebeb !important;
    resize: vertical;
    flex: unset;
  }
  .app-mail #app-content #app-content-wrapper .app-content-details {
    max-height: 90% !important;
    min-height: 20% !important;
    flex: 1;
    overflow-y: auto;
  }
  #mail-message, .app-content-details{
    max-width: revert !important;
    margin: revert !important;
  }
  #mail-message-header {
    top: auto !important;
    position: relative !important;
    background: #ebebeb !important;
    width: 100% !important;
  }
  #mail-message-header h2 {
    font-weight: bold;
  }
  #mail-content, .mail-message-attachments {
    margin: 10px 10px 50px 30px !important;
  }
  #emptycontent {
    margin-top: 5vh;
  }
  #load-more-mail-messages {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  .special-inbox.collapsible > .folder, .special-drafts.collapsible > .folder, .special-flagged.collapsible > .folder, .special-sent.collapsible > .folder {
    flex: auto !important;
    margin-left: 20px !important;
    box-shadow: none !important;
  }
  .app-mail #app-navigation .collapsible:not(.open) .app-navigation-entry-utils{
    border-bottom: #0082C9 solid 2px !important;
  }
  .app-mail #app-navigation .collapsible.open {
    background-color: #ebebeb !important;
    border-top: #fff 5px solid;
  }
  .app-mail #app-navigation .collapsible.open > .folder {
    font-weight: bold;
    border-bottom: #0082C9 solid 2px !important;
  }
  #mail-message-has-blocked-content {
    border: 1px solid #ffd480 !important;
    background: #ffff99 !important;
    padding: 10px !important;
  }
  iframe table{
		table-layout: inherit !important;
	}
}

@onclefranck That's part of the fix, looks like the scroll on the content iframe and the reply container need tweaking as they are currently stuck

Thank you so much for coming up with this in the first place, and even now looking at it again. It seems such a fundamental thing I can't believe it's not baked in in the first place.

@pm-pm No it currently doesn't work in 23.0.x I'm planning on working to get it working as I've started using Nextcloud mail again

@pm-pm On further inspection it appears this is no longer possible (at least with the flexible split panes) as the app is no longer using css for managing the pane sizing. The project is now using the https://github.com/antoniandre/splitpanes project and this breaks the method I was using quite completely.