Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Side effect of #6526 #6532

Closed
ellisonbg opened this issue Jun 11, 2019 · 6 comments · Fixed by #6548
Closed

Side effect of #6526 #6532

ellisonbg opened this issue Jun 11, 2019 · 6 comments · Fixed by #6548
Labels
bug pkg:application status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. tag:Design and UX
Milestone
1.0

Comments

@ellisonbg
Copy link
Contributor

Describe the bug

#6526 introduced 2 new problems:

  • Border at top of panel in main work area went away altogether.
  • Close icon in tab of main work area is too high.

Screenshots

Screen Shot 2019-06-10 at 6 21 27 PM
@ellisonbg ellisonbg changed the title Side effect of $6526 Side effect of #6526 Jun 11, 2019
@ellisonbg ellisonbg added this to the 1.0 milestone Jun 11, 2019
@ian-r-rose
Copy link
Member

I don't think #6526 is the culprit of the close icon issue. It doesn't appear in my testing, nor in the screenshot on that PR.

@ellisonbg
Copy link
Contributor Author

@blink1073 this is probably related to the big CSS refactor then...

@ian-r-rose
Copy link
Member

The border seems to be due to #6526, however. Perhaps we restore the tabBar border, then cover it up with an individual tab border on the active tab?

@jasongrout
Copy link
Contributor

I tried doing:

diff --git a/packages/application/style/tabs.css b/packages/application/style/tabs.css
index ab3b9f0c5..14569d800 100644
--- a/packages/application/style/tabs.css
+++ b/packages/application/style/tabs.css
@@ -19,6 +19,8 @@
 |----------------------------------------------------------------------------*/
 
 .p-DockPanel-tabBar {
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
+  overflow-y: visible;
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
 }

but according to https://developer.mozilla.org/en-US/docs/Web/CSS/overflow:

Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto.

That means that a scroll bar appears in the right side. I think this has to do with anything other than overflow visible creates a new graphics context.

jasongrout added a commit to jasongrout/jupyterlab that referenced this issue Jun 12, 2019
@jasongrout
Handle small tabs overflowing and preserve the border bridging for th…
9243140 
…e active tab

Fixes jupyterlab#6532
Reverts jupyterlab#6526
Reverts jupyterlab#6492


jupyterlab#3986 is now an issue again, but setting the tab min width to 0px (instead of 36px) and setting the tab overflow to hidden makes it less likely to appear in practice (i.e., the tabs need to be much denser now to overflow into the splitter). Setting the tab overflow to hidden also makes the close icon for tabs not overlap the next tab, which was very confusing.

I think this is the best compromise at this point.

I also experimented unsuccessfully with setting the z-index of the splitter handle in an attempt to get it to be on top of overflowing tabs.
@jasongrout jasongrout mentioned this issue Jun 12, 2019
Merged
@jasongrout
Copy link
Contributor

Fixed in #6548.

@lock
Copy link

lock bot commented Aug 6, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related discussion.

@lock lock bot locked as resolved and limited conversation to collaborators Aug 6, 2019
@jasongrout jasongrout added the status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. label Aug 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug pkg:application status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. tag:Design and UX
Projects
None yet
Milestone
1.0
3 participants
@ellisonbg @jasongrout @ian-r-rose