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

💄Fix broken layout due to long folder/file name (#117 & #124) #137

Merged
merged 4 commits into from
Jul 17, 2023

Conversation

Aymerix01
Copy link
Contributor

Description

Two issues were fixed:
The first one was when folder/file name were really long, the right layout with the 3 dots button was not on the screen. Now, if the name is too long, this button is still visible but not the whole name (in fact the name goes under the button and doesn't push it away)
Folder,file with long name

The second one was when a folder had also a long name and you entered into it, the access path could also push the right layout out of the screen. Now, if the folder name is too long, it ends with ... in the access path to reduce it.
access path

@@ -104,10 +104,10 @@ export const DocumentRow = ({
}
/>
</div>
<div className="grow text-ellipsis whitespace-nowrap overflow-hidden">
<div className="grow text-ellipsis whitespace-nowrap overflow-hidden" style={{ width: '100px'}}>
Copy link
Member

Choose a reason for hiding this comment

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

do not use absolute values at all please, absolute values are eligible only for min and max style,

<Base>{item.name}</Base>
</div>
<div className="shrink-0 ml-4">
<div className="shrink-0 ml-4" style={{ width: '20px' }}>
Copy link
Member

Choose a reason for hiding this comment

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

and also, could you move the styles, to the styles file, or what is even better if it's possible to use existing classes from tailwind css

} else {
return name;
}
}else {
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
}else {
} else {

@@ -25,6 +25,18 @@ export default ({
return <PathRender inTrash={inTrash || false} path={path} onClick={id => setParentId(id)} />;
};

function checkNamelength (name: any){
Copy link
Member

Choose a reason for hiding this comment

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

function checkNamelength (name: any){

This is a bad name.

What are you "checking" for? Is checking even the best name here?

@shepilov shepilov merged commit 6cbdc9d into main Jul 17, 2023
2 checks passed
@shepilov shepilov deleted the Fix-broken-layout-with-folder/file-name-long branch July 17, 2023 14:41
Aymerix01 added a commit that referenced this pull request Jul 19, 2023
* 💄Fix broken layout due to long folder/file name
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants