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

Edited template of search box result item to fix overflow text in row #2419

Merged

Conversation

jozefpetro
Copy link
Contributor

Issue: #2183

What I did

  • fixed overflow in row when name of story is too long as you can see in the pictures

screen shot 2017-12-03 at 23 22 34

screen shot 2017-12-03 at 23 25 45

How to test

  • bootstrap everything
  • open cra-kitchen-sink storybook
  • cmd+shift+p on mac to open searchbox or use win equivalent hotkey
  • type 'saa' in searchbox

Is this testable with jest or storyshots?

  • not really sure about this one, maybe it's not necessary for this ?

@codecov
Copy link

codecov bot commented Dec 3, 2017

Codecov Report

Merging #2419 into master will increase coverage by <.01%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #2419      +/-   ##
==========================================
+ Coverage   16.65%   16.65%   +<.01%     
==========================================
  Files         302      302              
  Lines        7770     7769       -1     
  Branches      776      776              
==========================================
  Hits         1294     1294              
+ Misses       5879     5878       -1     
  Partials      597      597
Impacted Files Coverage Δ
lib/ui/src/modules/ui/components/search_box.js 32.94% <ø> (+0.38%) ⬆️
app/react/src/server/utils.js 0% <0%> (-53.58%) ⬇️
app/vue/src/server/utils.js 53.57% <0%> (+53.57%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update eedd257...fefcfe7. Read the comment docs.

@Hypnosphi Hypnosphi self-requested a review December 3, 2017 15:39
@Hypnosphi Hypnosphi self-assigned this Dec 3, 2017
@danielduan danielduan added the ui label Dec 4, 2017
Copy link
Member

@Hypnosphi Hypnosphi left a comment

Choose a reason for hiding this comment

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

Let's add text-align: right to the second p

<span style={{ float: 'right', opacity: 0.5 }}>
<div key={val.value} style={{ ...style, display: 'flex', justifyContent: 'space-between' }}>
<p style={{ margin: 0 }}>{val.value}</p>
<p style={{ opacity: 0.5, margin: 0, paddingLeft: 10 }}>
Copy link
Member

Choose a reason for hiding this comment

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

Let's add text-align: right here

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for reviewing !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants