fix: explorer table expanding beyond page bounds #485
Conversation
Codecov Report
@@ Coverage Diff @@
## main #485 +/- ##
=======================================
Coverage 85.68% 85.68%
=======================================
Files 749 749
Lines 15321 15321
Branches 1814 1814
=======================================
Hits 13128 13128
Misses 2162 2162
Partials 31 31
Continue to review full report at Codecov.
|
This comment has been minimized.
This comment has been minimized.
|
|
||
| .table { | ||
| flex: 1 1; | ||
| width: 100%; |
There was a problem hiding this comment.
this scares me - shouldn't the table be sized not to overflow?
There was a problem hiding this comment.
Yeah, its odd. But this is the overflow for the table-widget-renderer. There is another overflow:auto in table itself that usually does the scrolling, but in explorer due to the way the page flexes, it is required here too.
There was a problem hiding this comment.
Changed it to hidden, because that's really more accurate since it isn't actually doing the scrolling.
There was a problem hiding this comment.
I pulled it locally and chromium looks fine, but safari doesn't -
There was a problem hiding this comment.
Also, using min-height: 0; instead of the overflow seems to have the same effect in chromium (but also, unfortunately the same effect in safari - perhaps that's a pre-existing issue?)
There was a problem hiding this comment.
After looking a bit, I'm guessing this must have been existing for a while. We just don't get Safari traffic so it hasn't been reported.
Can we get this fix in so at least get things fixed on Chrome and FF? I'll follow up with a fix for Safari.
There was a problem hiding this comment.
Yep - do you think it makes min-height instead of overflow here? I was feeling it was better because overflow (auto or hidden) is describing behavior we don't actually want - it should never overflow by design. Min-height works because the issue that I was seeing is the default of min-height:auto in flex col layout was preventing shrinking.
There was a problem hiding this comment.
Sure, agreed. Let me test that change in the Safari fix and use min-height instead if it works.
There was a problem hiding this comment.
Think I found a solution that works for Safari. Just going to tack it on to this one.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Description
After fixing the Safari issues with flexbox, the Explorer table was expanding beyond the page limits. This PR fixes that and a few other small styling issues with table in explorer.
Testing
Manual testing of this table and tables in other parts of the product, including entity lists, events, and api def.