rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: note icons getting pushed by extra-long words (#835)

Browse Source
This commit is contained in:
Aman Harwara
2022-01-31 19:20:48 +05:30
committed by GitHub
parent 46ee84ce24
commit 0e00901f15
2 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/components/NotesListItem.tsx
View File

@@ -93,8 +93,8 @@ export const NotesListItem: FunctionComponent<Props> = ({
</div> </div>
)} )}
<div className={`meta ${hideEditorIcon ? 'icon-hidden' : ''}`}> <div className={`meta ${hideEditorIcon ? 'icon-hidden' : ''}`}>
<div className="name"> <div className="name-container">
<div>{note.title}</div> <div className="name">{note.title}</div>
<div className="flag-icons"> <div className="flag-icons">
{note.locked && ( {note.locked && (
<span title="Editing Disabled"> <span title="Editing Disabled">

12
app/assets/stylesheets/_notes.scss
View File

@@ -134,18 +134,24 @@
padding-left: 1rem; padding-left: 1rem;
} }
.name { .name-container {
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
font-weight: 600; font-weight: 600;
font-size: 1rem; font-size: 1rem;
line-height: 1.3; line-height: 1.3;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; }
.name {
word-break: break-all;
margin-right: 0.5rem;
} }
.flag-icons { .flag-icons {
padding: .135rem 0;
&, &,
& > * { & > * {
display: flex; display: flex;