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.

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

Svg fixed height causes gaps when fitting smaller window #2160

Closed
badbort opened this issue Jun 29, 2021 · 3 comments · Fixed by #2312
Closed

Svg fixed height causes gaps when fitting smaller window #2160

badbort opened this issue Jun 29, 2021 · 3 comments · Fixed by #2312
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@badbort
Copy link

badbort commented Jun 29, 2021

Describe the bug
Large-ish sequence diagram gets resized as you'd expect when the window is made smaller, but the fixed height of the svg adds large gaps of whitespace above and below as the diagram is reduced in size to fit the constrained horizontal width.

image

To Reproduce

Use this diagram:

sequenceDiagram
	participant User
	participant GitRepo
	participant Server
	participant ResourceA
	participant ResourceB
	participant ResourceC
	
	User->>GitRepo: Commit changes
	loop
		Server->>GitRepo: Check for changes
	end
	User->>Server: Manually Trigger
	note right of Server: Something pipeline scheduled
	
	rect rgba(0,255,0,.1)
		note over Server,ResourceB: Blah blah blah
		activate ResourceA
		GitRepo->>ResourceA: Blah blah blah
		note right of ResourceA: Blah blah blah:<br/>Blah blah blah
		ResourceA->>Server: Blah blah blah
		deactivate ResourceA	
		
		Server->>ResourceB: something something something
		activate ResourceB
		note left of ResourceB: something:<br/>- something something something<br/>- Adds/generates stuff<br/>-Does things<br/>-Does more things<br/>-Hey, more things
		ResourceB->>Server: something something something something
		deactivate ResourceB	
	end
	
	note right of Server: Something something something<br/>Something something something
	
	rect rgba(0,255,0,.1)
		note over Server,ResourceB: something something
		Server->>ResourceB: Does something
		activate ResourceB
		note left of ResourceB: Something something something
		note left of ResourceB: Something something something
		
		ResourceB->>Server: Something something something
		deactivate ResourceB	
	end
	
	note right of Server: something something completed<br/>Schedule something something
	
	rect rgba(0,255,0,.1)
		note over Server,ResourceC: Blah something more
		Server->>ResourceC: Downloads something artifacts
		activate ResourceC
		note left of ResourceC: Blah blah blahBlah blah blah<br/>produces something something
		ResourceC->>Server: Blah blah blahBlah blah blah
		deactivate ResourceC	
	end
	
	note over User,Server: Blah blah bla<br/>Blah blah blah

Removing the height attribute changes it to how i'd expect:

image

@badbort badbort added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Jun 29, 2021
@badbort
Copy link
Author

badbort commented Jun 29, 2021

This can also be reproduced easily in the live editor:

image

@GanZhiXiong
Copy link

I ran into the same problem and you can repeat it at the link below.
https://ganzhixiong.com/p/8d969531/
image

@cm-wada-yusuke
Copy link
Contributor

I have a same problem. I created a PR for 100% height when useMaxWidth is true.

#2312

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants