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;
	}
}

Does it work with 23.0.x?
I have no luck to make it work.

@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.