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

[Lens] Fix overlowing content on a chart for charts and table #92006

Merged
merged 2 commits into from
Feb 22, 2021
Merged

[Lens] Fix overlowing content on a chart for charts and table #92006

merged 2 commits into from
Feb 22, 2021

Conversation

mbondyra
Copy link
Contributor

@mbondyra mbondyra commented Feb 19, 2021 •
edited
Loading

Summary

Fixes #91827
Fixes #91808

@MichaelMarcialis I also changed the double border that you asked me about in this PR: #90546 and simplified CSS a bit.

Checklist

Delete any items that are not applicable to this PR.

For maintainers

@mbondyra mbondyra added Team:Visualizations Visualization editors, elastic-charts and infrastructure v8.0.0 release_note:skip Skip the PR/issue when compiling release notes Feature:Lens v7.12.0 v7.13.0 labels Feb 19, 2021
@mbondyra mbondyra requested a review from a team February 19, 2021 13:04
@mbondyra mbondyra requested a review from a team as a code owner February 19, 2021 13:04
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app (Team:KibanaApp)

@mbondyra mbondyra force-pushed the lens/fix-overlowing-content branch 2 times, most recently from 74f323c to bf1cc6b Compare February 19, 2021 13:23
@mbondyra mbondyra changed the title [Lens] Fix overlowing content [Lens] Fix overlowing content on a chart for charts with a long legend Feb 19, 2021
@elastic elastic deleted a comment from kibanamachine Feb 19, 2021
@mbondyra mbondyra changed the title [Lens] Fix overlowing content on a chart for charts with a long legend [Lens] Fix overlowing content on a chart for charts and table Feb 19, 2021
MichaelMarcialis
MichaelMarcialis approved these changes Feb 19, 2021
View reviewed changes
Copy link
Contributor

@MichaelMarcialis MichaelMarcialis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left two small SCSS comments. Otherwise, this looks good to me. Approving now so I don't hold you up.

@mbondyra mbondyra force-pushed the lens/fix-overlowing-content branch from f7dfc76 to 70a0ad4 Compare February 21, 2021 09:18
@mbondyra
Apply suggestions from code review
52bf402 
Co-authored-by: Michael Marcialis <[email protected]>
@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
lens 918.2KB 918.4KB +143.0B

History

  • 💚 Build #108018 succeeded f7dfc7633fa50aba94bc25136cab40f6ff5c2801
  • 💔 Build #107994 failed bf1cc6b2465a40ec7706e7d355d73016a1a77ee2

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

flash1293
flash1293 approved these changes Feb 22, 2021
View reviewed changes
Copy link
Contributor

@flash1293 flash1293 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested in Chrome and Firefox and works fine, but could you explain why? I don't think I fully understand.

@mbondyra
Copy link
Contributor Author

Sure @flash1293 ! The bug was introduced here: https://github.com/elastic/kibana/pull/90546/files?file-filters%5B%5D=.scss&file-filters%5B%5D=.snap&file-filters%5B%5D=.ts#diff-abdd9591f08d4a8a7d0b62f4d329533a9d1bd7c4202f98199c34c8a5791678a5L20 by removing overflow:auto on lnsWorkspacePanelWrapper__pageContentBody. That allowed us to display correctly the drag and drop ghost elements, without it it looks like here:
image

So the problem is how to simultaneously:

  1. make a workspace element not overflowing the context, but scrolling it (with overflow: auto)
  2. make DragDrop ghost visible (so overflow: visible).

The solution is change the structure of the HTML to make lnsWorkspacePanelWrapper__pageContentBody a child of DragDrop (before DragDrop was a child of lnsWorkspacePanelWrapper__pageContentBody)

Let me know if it's clear!

@mbondyra mbondyra merged commit e1d0cd5 into elastic:master Feb 22, 2021
mbondyra added a commit to mbondyra/kibana that referenced this pull request Feb 22, 2021
@mbondyra
[Lens] Fix overlowing content on a chart for charts and table (elasti…
d058032 
…c#92006)
@mbondyra mbondyra mentioned this pull request Feb 22, 2021
Merged
mbondyra added a commit to mbondyra/kibana that referenced this pull request Feb 22, 2021
@mbondyra
[Lens] Fix overlowing content on a chart for charts and table (elasti…
1651043 
…c#92006)
@mbondyra mbondyra mentioned this pull request Feb 22, 2021
Merged
gmmorris added a commit to gmmorris/kibana that referenced this pull request Feb 22, 2021
@gmmorris
Merge branch 'master' into alerting/onclose-indicator
ce20d1c 
* master: (36 commits)
  [Uptime] Thumbnail full screen view steps navigation fix (elastic#91895)
  Implement ScopedHistory.block (elastic#91099)
  [Lens] Fix overlowing content on a chart for charts and table (elastic#92006)
  handle source column differences in embeddable as well (elastic#91987)
  [Vega] [Map] disable map rotation using right right click /  touch rotation gesture (elastic#91996)
  [Lens] Load indexpatterns list from indexPattern Service (elastic#91984)
  [coverage] ingest data in parallel (elastic#92074)
  [Lens] Drag and drop performance improvements (elastic#91641)
  A few more environment uiFilters fixes (elastic#92044)
  Enabling Uptime and Dashboard a11y test (elastic#91017)
  [Security Solution][Detections] Adds more granular validation for nested fields (elastic#92041)
  [Security Solution] [Detections] add overflow-wrap for description (elastic#91945)
  [Security Solution] [Detections] do not truncate filename in value list table in modal (elastic#91952)
  Skip flaky apm test elastic#91673 (elastic#92065)
  [docker] Default server.name to hostname (elastic#90799)
  Use documentation link service for snapshot restore (elastic#91596)
  [Security Solution] Clearing up all jest errors and warnings (elastic#91740)
  Add `@kbn/analytics` to UI Shared Deps (elastic#91810)
  [7.12][Telemetry] Add missing fields for security telemetry (elastic#91920)
  [Security Solution] Adds cypress-pipe (elastic#91550)
  ...
@mbondyra mbondyra deleted the lens/fix-overlowing-content branch February 22, 2021 13:14
mbondyra added a commit that referenced this pull request Feb 22, 2021
@mbondyra
[Lens] Fix overlowing content on a chart for charts and table (#92006) (
20de78d 
#92145)
mbondyra added a commit that referenced this pull request Feb 22, 2021
@mbondyra
[Lens] Fix overlowing content on a chart for charts and table (#92006) (
76924e2 
#92144)
@mbondyra mbondyra mentioned this pull request Jun 2, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@flash1293 flash1293 flash1293 approved these changes

@MichaelMarcialis MichaelMarcialis MichaelMarcialis approved these changes

Assignees
No one assigned
Labels
Feature:Lens release_note:skip Skip the PR/issue when compiling release notes Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.12.0 v7.13.0 v8.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Lens] For charts with long legend, the content overflows the chart [Lens] DataTable is not responsive
5 participants
@mbondyra @elasticmachine @kibanamachine @flash1293 @MichaelMarcialis