Bad positionning of filename and favorite star and missing file info (overlapping the file icon)

[medcloud]

How to use GitHub

• Please use the 👍 reaction to show that you are affected by the same issue.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

Steps to reproduce

1. Connect to NextCloud server
2. Select a text or word file (or whatever other file)
3. Click on detailed view

Expected behaviour

On right side, you should see the file icon and below the filename, followed by the favorite star button

Actual behaviour

Currently, the file name and favorite star button are overlapping the file icon (and file name is cutted).
Moreover, file size and last modification info are no more visible.

This is a regression, as it was correctly displayed on NC17.

Correct situation in NC17

Bad positionning and missing info in NC20

Server configuration

Operating system:
Debian 10.12-2

Web server:
Apache 2.4

Database:
PostgreSQL 10.12

PHP version:
PHP 7.3.19

Nextcloud version: (see Nextcloud admin page)
NextCloud v 20.0.1

Updated from an older Nextcloud/ownCloud or fresh install:
NextCloud v 17.0.9

Login as admin user into your Nextcloud and access
http://example.com/index.php/settings/integrity/failed, paste the results here.
No errors have been found.

List of activated apps:
Accessibility 1.6.0 / Activity 2.13.2 / Calendar 2.1.2 / Comments 1.10.0 / Contacts 3.4.1 / Contacts Interaction 1.1.0 / Custom CSS 1.7.0 / Data Request 1.7.0 / Deleted files 1.10.1 / DICOM Viewer 1.2.2 / External sites 3.7.1 / File sharing 1.12.0 / Group folders 8.1.0 / Log Reader 2.5.0 / Notifications 2.8.0 / Password policy 1.10.1 / PDF viewer 2.0.1 / Photos 1.2.0 / Recommendations 0.8.0 / Right click 0.17.0 / Share by mail 1.10.0 / Support 1.3.0 / Text 3.1.0 / Theming 1.11.0 / Update notification 1.10.0 / Usage survey 1.8.0 / User status 1.0.0 / Versions 1.13.0 / Video player 1.9.0

**Are you using external storage, if yes which one: no

**Are you using encryption: no

**Are you using an external user-backend, if yes which one: no

Client configuration

Version 86.0.4240.111 (Build officiel) (64 bits)

Operating system:
Windows 10 Version 10.0.19041 Numéro 19041

[wiswedel]

Addition:
For files with an auto-generated preview, the old behaviour is still intact:

Folders and other filetypes without preview however show the behaviour as described by @medcloud.

CC @nextcloud/designers

[skjnldsv]

cc @raimund-schluessler

[raimund-schluessler]

Hm, since it works for files with a preview, I guess we are missing a prop for files/folders without a preview.

[medcloud]

Right, In addition it works only with .md file, because .txt is same as other files.

[medcloud]

Moreover another issue I faced trying this test (maybe I should create new issue topic ?) : Creating a new md file, I filled with "uouo" text we can see on previous screenshot. However, after I changed to "Hello Word" but clicking again on the .md file, the preview keeps "uouo" text and doesn't update to "Hello Word".

I am using Google Chrome (86.0.4240.111) on Win10 and I tried to force a refresh (CTRL + F5) > not successfull neither.

I created a new dedicated issue report for the last problem at #24206

[skjnldsv]

Right, In addition it works only with .md file, because .txt is same as other files.

It's just if you have a preview or not for this file.
This is behaving properly.

[raimund-schluessler]

A CSS rule in server

#content[class*="app-"] * {
    box-sizing: border-box;
}

interferes with the appsidebar content.
A very simple fix would be to set

.app-sidebar-header__desc{
    box-sizing: content-box;
}

which fixes it:
Before:

After:

But it might be worth to adjust the sidebar so that box-sizing: border-box; actually works with it. What do you think @skjnldsv?

[skjnldsv]

But it might be worth to adjust the sidebar so that box-sizing: border-box; actually works with it. What do you think @skjnldsv?

yes, we assume border-box is everywhere for easier css management

[raimund-schluessler]

I pushed a fix to nextcloud-libraries/nextcloud-vue#1767. But it would require updating the vue components in server, which is likely not gonna happen for the stable branches. Might be necessary to directly commit a workaround to server.

[szaimen]

I think this was fixed in the meantime. (NC22)