[OSX] Folder tree higlight overlapping into message list

[buhund]

First, I love these themes! Excellent work!

Then the issue:

There seems to be a problem where the higlighting of folders in the folder tree overlaps into the message list area. Also, the colour of the column header does not extend all the way to the folder view. I've attached a picture, where to issue should be much clearer than my attempt at words. The white areas are obviously my cutting out my folders and email :)

My system is latest macOS, 15" rMBP.

[conema]

Hi @Oter2k, I can't reproduce your issue, may you try to change these things in your css?

Open your icons css set with an editor, for example I'm using the lightDarkIcons.css. Locate this code near line 13:

#threadCols {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

#threadTree treechildren {
    margin-left: 5px !important;
    margin-right: 5px !important;
}

Comment all this code, so it will become:

/*#threadCols {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

#threadTree treechildren {
    margin-left: 5px !important;
    margin-right: 5px !important;
}*/

After that, save the file and restart Thunderbird, it should work. Let me know if that worked.

[buhund]

Hi. I commented out what you suggested (line 11 through 19) in the icon set darkIcons.css, but it didn't really change anything as far as I could tell. Or at least it didn't fix the issue. Theme is system.css. Tried disabling all addons, in case one of them were interfering somehow, but that didn't do anything either. Appearance is set to Default.

[conema]

@Oter2k May you paste your userChrome.css and your system.css?

[buhund]

userChrome.css

/*
 * Huge thanks to the following for their inspiration/guidance:
 * http://www.linnhe2.free-online.co.uk/thunderbird/chrome.html - For a very comprehensive guide to userChrome.css
 * https://monterail.com/blog/2016/the-power-of-email-clients-why-did-we-redesign-thunderbird?utm_source=Thunderbird&utm_campaign=Dribbble&utm_medium=blogpost%22 - For the initial inspiration to do this
 * http://www.omgubuntu.co.uk/2017/04/stunning-thunderbird-redesign-mockup - For alerting me to the beautiful mockup by monterail.com
*/

/* Uncomment to use square tabs (square tabs are enabled anyway for all except system.css) */
/* @import "tweaks/square-tabs.css"; */

/******************************************************************/
/*********************** SELECT THEME HERE ************************/
@import "themes/system.css";
/******************************************************************/
/******************************************************************/

/* Select icon theme (leave commented to use default for the selected theme)*/
/* @import "icons/lightIcons.css"; /*For dark Folder Tree and Message List*/
/* @import "icons/lightDarkIcons.css"; /*For dark Folder Tree, with a light Message List*/
 @import "icons/darkIcons.css"; /*For light Folder Tree and Message List*/

/****************************************************************************/
/******** Variables: Uncomment and Edit these for easy customisation ********/
/****************************************************************************/
:root {
  /*---- General Options ----*/
  /*--default-font: var(--light-sans-font); /* Change to var(--system-font) to use your default font, or specify a font name */
  /*--menu-text-color: MenuText;*/

  /*---- Highlight Colors - Used if more specific ones aren't specified below ----/
  /*--highlight-color: Highlight;*/
  /*--highlight-text-color: HighlightText;*/

  /*---- Tree Views (Folder Tree/Message List) General Options ----*/
  /*--tree-row-highlight-background-color: var(--highlight-color);*/
  /*--tree-row-highlight-text-color: var(--highlight-text-color);*/

  /*---- Folder Tree ----*/
  /*--folder-tree-background-color: Menu;*/
  /*--folder-tree-text-color: MenuText;*/
  /*--folder-tree-row-height: 25px;*/
  /*--folder-tree-highlight-background-color: var(--tree-row-highlight-background-color);*/
  /*--folder-tree-highlight-text-color: var(--tree-row-highlight-text-color);*/

  /*---- Message List ----*/
  /*--message-list-header-background-color: Dialog;*/
  /*--message-list-background-color: none;*/
  /*--message-list-text-color: WindowText;*/
  /*--message-list-row-height: 40px;*/
  /*--message-list-highlight-background-color: var(--tree-row-highlight-background-color);*/
  /*--message-list-highlight-text-color: var(--tree-row-highlight-text-color);*/

  /*---- Scollbar ----*/
  /*--scrollbar-thumb-color: rgba(127,127,127,0.5);*/
  /*--scrollbar-thumb-hover-color: var(--highlight-color);*/

  /*---- Message Headers (To/Subject/From etc) ----*/
  /*--subject-line-font-size: 150%;*/
  /*--headers-background-color: transparent;*/
  /*--headers-text-color: WindowText;*/
}
/****************************************************************************/
/****************************************************************************/
/****************************************************************************/

system.css

/*
 * Huge thanks to the following for their inspiration/guidance:
 * http://www.linnhe2.free-online.co.uk/thunderbird/chrome.html - For a very comprehensive guide to userChrome.css
 * https://monterail.com/blog/2016/the-power-of-email-clients-why-did-we-redesign-thunderbird?utm_source=Thunderbird&utm_campaign=Dribbble&utm_medium=blogpost%22 - For the initial inspiration to do this
 * http://www.omgubuntu.co.uk/2017/04/stunning-thunderbird-redesign-mockup - For alerting me to the beautiful mockup by monterail.com
*/

@import "_base.css";

/* Select icon theme (leave commented to use default for the selected theme)*/
/* @import "../icons/lightIcons.css"; /*For dark Folder Tree and Message List*/
/* @import "../icons/lightDarkIcons.css"; /*For dark Folder Tree, with a light Message List*/
@import "../icons/darkIcons.css"; /*For light Folder Tree and Message List*/

/**** Variables: Uncomment and Edit these for easy customisation ****/

:root {
  /*---- General Options ----*/
  --menu-text-color: MenuText;
  /*** These highlight colors are used if more specific ones aren't specified below ***/
  --highlight-color: Highlight;
  --highlight-text-color: HighlightText;

  /*---- Tree Views (Folder Tree/Message List) General Options ----*/
  --tree-row-highlight-background-color: var(--highlight-color);
  --tree-row-highlight-text-color: var(--highlight-text-color);

  /*---- Folder Tree ----*/
  --folder-tree-background-color: none;
  --folder-tree-text-color: -moz-menubartext;
  --folder-tree-row-height: 25px;
  --folder-tree-highlight-background-color: var(--tree-row-highlight-background-color);
  --folder-tree-highlight-text-color: var(--tree-row-highlight-text-color);

  /*---- Message List ----*/
  --message-list-header-background-color: -moz-dialog;
  --message-list-header-text-color: WindowText;
  --message-list-background-color: -moz-default-background-color;
  --message-list-text-color: WindowText;
  --message-list-row-height: 40px;
  --message-list-highlight-background-color: var(--tree-row-highlight-background-color);
  --message-list-highlight-text-color: var(--tree-row-highlight-text-color);

  /*---- Scollbar ----*/
  --scrollbar-thumb-color: rgba(127,127,127,0.5);
  --scrollbar-thumb-hover-color: var(--highlight-color);

  /*---- Message Headers (To/Subject/From etc) ----*/
  --subject-line-font-size: 150%;
  --headers-background-color: transparent;
  --headers-text-color: WindowText;

}

/******************************************************/

#folderTree {
    -moz-appearance: menubar !important;
}

[spymastermatt]

@Oter2k Do you get the same problem in the other themes? It may be an issue in the _base.css, which affects all themes.

[buhund]

@spymastermatt Yeah, I just went through all five themes, and they all had exactly the same issue.

[spymastermatt]

Ok so it looks like an issue in _base.css. Can you try opening that file and commenting the line which changes the box-sizing property and see if that fixes it? Thanks

[buhund]

@spymastermatt Sorry for the late reply.

Opened _base.css, searched for "box", and reasoned that line 89 and 90 would likely be the one you're referring to.

#folderTree > hbox {
    margin-top: 30px !important;

If so, commenting them out didn't change anything.

I downloaded the newest version to see if the problem persisted there, and found that the overlap is now only present when I select a folder which is besides the inbox window, but is gone when the selecting line up with the preview window (in Classic view). See attached screen shots.

I tried commeting out the lines (here, 90 and 91) in the latest download too, but no sigar.

[jyrkij]

I can confirm this exists. MacOS 10.12.6, Retina MBP 13", Thunderbird 52.3.0 (64 bit). It seems to be related to system settings General -> Show scrollbars -> On scroll (not sure these are the exact names, my system isn't in English). If I change the setting to Always the overlap goes away.

[953693]

Thanks @jyrkij for that finding.

I've noticed that the overlap in the highlight row is precisely the same as the width of the scrollbar. A workaround I've found, in the event that the use-case is such that scrollbars are always shown, is to add the following line in _base.css:

#folderTree > treechildren::-moz-tree-row(selected) {
...
    margin-right: 10px;
}

... where further down in the same file, we have the (max-)widths defined as 10px:

...
scrollbar {
...
    width: 10px !important;
    max-width:10px !important;
...
}

Reducing the (max-)width of the scrollbar will require a corresponding reduction in the margin-right value.

The downside being when the scrollbar is not shown (i.e. hidden/not enough folders to require it), this workaround will result in the highlight not filling the entire row.

For reference, I'm running MacOS 10.13.1 and Thunderbird 52.4.0.