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

2017/11/29

• - Fixed loading image position
• - Added highlight to The images have been blocked to protect your privacy.
• - Fixed empty folder background image position
• - Added resize to messages pane
• - Changed subfolder background color from gradient to solid

2018/02/09

• - Added indicator line to subfolder Parent
• - Added indicator line and Bold text to open Parent Folder
• - Added more specific selectors for the app-navigation changes to avoid conflicts with the news app in NC13
• - Fixed Settings menu width
  - [x] - Forced Subfolders to new lines - No longer needed in Nextcloud 13

2018/02/12

• - Fix empty folder mail icon location

2018/05/30

• - Fixed special folder subfolder collapse

2018/09/27

• - Nextcloud 14 structural changes

2018/10/17

-[x] - Fixed message list not filling screen with recent update

2019/11/07

-[x] - Fixed message list not filling screen with NC17
-[x] - Fixed message composer not filling screen with NC17

Tested with: Firefox 70.0.1 (64-bit) - Nextcloud 17.0.0

Website: PeekRead.Info

Updated for Nextcloud 13 See the revisions page for Nextcloud 12

Updated for Nextcloud 14. Note: Not backwards compatible

Tested with Nextcloud 15

Does the file still run on NC 20.7? I followed the instructions but don't see a difference. Thanks for your help!

Hi, Unfortunately I haven't been using the mail app for a few versions. I'll re-install it and give it a shot, if it's not too much work I'll do an update

Exact same problem here using Nextcloud 20.0.7

Not sure if I did it right but I replaced #app-content selector by #app-content-vue everywhere in horizontal.css an it appeared to work properly. I might have some bias so please confirm I did it right.

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

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.