-
Notifications
You must be signed in to change notification settings - Fork 95
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
style(ui-markdown-editor): resolve toolbar icon shrinkage - I228 #229
style(ui-markdown-editor): resolve toolbar icon shrinkage - I228 #229
Conversation
…I228 Signed-off-by: K-Kumar01 <kushalkumargupta4@gmail.com>
We should have addressed this in #228, but any thoughts on how this should ideally be @Michael-Grover? My first thought is having a minimum width for the whole editor, so the icons can not need to resize or anything. |
@irmerk |
@irmerk I agree that a minimum width for the editor would make sense. @K-Kumar-01 How about making the minimum the same width as the contract editor component? It looks like that's 670px. |
@Michael-Grover |
@K-Kumar-01 I'm not sure what the best way to do this is from a coding perspective, but what I'm suggesting is that we: Make this sure this component can't reduce to a width smaller than 670px. When the screen is too narrow to accommodate the 670px width component, the component will overflow off the right side of the screen. For example, if the viewport is 400px width, the component will be 670px width, however if the viewport is 1200px width, the component will grow in size to fit the screen like it currently does. This will ensure the toolbar is never so narrow that the icons shrink. |
@Michael-Grover |
I don't think we should be concerned with mobile usage. This repository is not geared towards that end. In the future, we can approach mobile functionality. In the meantime, I think we should set a minimum width for the editor and toolbar and let if overflow if the page width is reduced to less than that. This should remove the issue of icons resizing because nothing can go lower in width than what we specify. |
@irmerk @Michael-Grover Attaching screenshots for reference.If it is suitable, I will commit it otherwise make any more changes needed. Code
Let me know if there are any changes required. |
Hi @K-Kumar-01 , I opened the Netlify link and I'm somehow still able to reduce the width of the component below the minimum we set. @irmerk are you seeing the same behavior? |
@K-Kumar-01 could you add your commits to the PR so we can view the changes? |
…I228 Reverted back to original settings Toolbar and editor given a minimum width Signed-off-by: K-Kumar01 <kushalkumargupta4@gmail.com>
@irmerk @Michael-Grover |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks good to me, thanks 👍 . @irmerk may want to review as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think this is the right approach. I. think the consumer of the ui-markdown-editor
component should determine the overflow. In this instance that would be the Storybook. Also, you've already set the min-width
on the Menu
, so this useEffect
isn't necessary.
@irmerk
I am not quite getting what you are trying to say. 😅 As for the useEffect part, the minWidth only makes the toolbar to a min-width. |
@irmerk |
Yes the |
@irmerk |
Yes I believe that is correct. |
…I228 Minimum width given to markdown editor Added global styles to storybook body Signed-off-by: k-kumar-01 <kushalkumargupta4@gmail.com>
@irmerk @Michael-Grover |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good to me, thanks!
This still doesn't look like the right approach to me - wrapping the editor in a |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry I haven't had much time to look into this more before and haven't been able to give very helpful guidance. I didn't look at this well enough and that resulted in this idea.
But I believe all we really need is to configure min-width: 600px
in these two places. We don't need overflow-x: auto
or anything else.
@irmerk |
Ah, well that should be added in the storybook, not on |
Min-width given to toolbar and text editor separately Removed the enclosing div Signed-off-by: k-kumar-01 <kushalkumargupta4@gmail.com>
@irmerk and @Michael-Grover |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great, thanks for your patience! Want to get @DianaLease's 👀 on this as well.
Closes #228
The toolbar icons in markdown shrank too much. Resolved that issue.
Changes
Flags
height:50px
that may seem a bit large in some small area range.Screenshots or Video
Author Checklist
--signoff
option of git commit.master
fromfork:branchname