README WordPress the code is overflowing

[ZerooCool]

Hi, i need help for a fixe.
Can you see a page with the README file from WordPress ?
As you can see, the code is overflowing.
I tested different CSS property but I can not patch this problem.
It does not work with word-break or overflow
I then tried to replace from the browser, the html PRE tag DIV and the rendering is consistent.
Can you tell me if another way of doing things is possible in CSS, if not, can you tell me or find this PRE tag in the source code of GITEA, in order to correct it? Can you take into consideration my remark, and, bring a fix for this problem?

[saitho]

Did you try:

pre {
  white-space: pre-wrap;
}

[ZerooCool]

Nice ! Thank you !
A other way is : change PRE for a DIV :
The file is templates/repo/view_file.tmpl:49

Change the CSS is better. Can you add this fixe ?

Where i can add this code ?

[kolaente]

You could add this somewhere in public/less/_repository.less and then send a pr.

However, keep in mind HTML rendering was shut off on purpose, to prevent XSS attacks.

[ZerooCool]

Ok I will make a proposal to update this file, with your CSS fix thank you very much.

https://github.com/go-gitea/gitea/blob/master/public/less/_repository.less

[ZerooCool]

Some checks haven’t completed yet
1 expected and 1 pending checks
approvals/lgtm Expected — Waiting for status to be reported
Required
continuous-integration/drone/pr Pending — Build is running
Required
Details

Merging is blocked
The base branch restricts merging to authorized users. Learn more about protected branches.

ae74566

[ZerooCool]

kolaente say : That's changing the code-diff view, not the readme.

Ok, that's not what's wanted then.
Here is the view of the HTML code (WordPress README displayed by default on our project) that I want to change because the code overflows.

An idea of CSS to modify?
In my online tests, the following CSS I modify:
/vendor/plugins/semantic/semantic.min.css

[ZerooCool]

Return of the administrator who deployed our GITEA.

I installed gitea via the docker I can not find the CSS files in it; I understand half that slab to docker, I think I have a docker-dial that assembles a docker gitea that is elsewhere with its own files
but I do not find "semantic.min.css" nowhere
it must be in a virtual disk image or a crap like this: smile:
if I enter the docker that I modify the file I do not know if it will survive the next "make down" make up the docker composes.

[saitho]

semantic.min.css is not the place to add the changes, as that is a separate project (https://github.com/Semantic-Org/Semantic-UI). Adding it to _repository.less is fine. You just added it at the wrong line (see my comment in your PR). ;)

[ZerooCool]

saitho say :
Adding the CSS property to pre tags inside the .non-diff-file-content .plain-text class should be fine.
on file public/less/_repository.less add the following after line 327: pre { white-space: pre-wrap; } Make sure to indent the lines properly.

Rebuild the CSS file with make generate-stylesheets and commit that as well (as suggested by the DroneCI error message).

ZerooCool :
overflow: scroll Looks better to keep line numbering, especially on PHP pages, which is not necessarily the property white-space: pre-wrap; ?

[ZerooCool]

I add line 330 :
https://github.com/ZerooCool/gitea/blob/master/public/less/_repository.less

[ZerooCool]

I have test a new pull request with the good code.
#6696

I can not finalize.
Can you make this change.

[ZerooCool]

I install NODE.js and NPM
sudo apt-get install curl software-properties-common
curl -sL https://deb.nodesource.com/setup_11.x | sudo bash -

cd gitea-local-depot/
make generate-stylesheets
npx lessc --clean-css public/less/index.less public/css/index.css
npm ERR! code E404
npm ERR! 404 Not Found: lessc@latest

npm ERR! A complete log of this run can be found in:
npm ERR! /home/looksaalpha/.npm/_logs/2019-04-22T02_43_17_676Z-debug.log
L'installation de lessc@latest a échoué avec le code 1
Makefile:392: recipe for target 'generate-stylesheets' failed
make: *** [generate-stylesheets] Error 1

I don't no how i can push my patch for " README WordPress the code is overflowing "

In this file :
public/less/_repository.less
Line 330
Add this code for resolve this issue :

            pre {
                overflow: scroll;
            }

Can you add this patch please, push it on the deposit, because, I can not do it.

You can see that the WordPress README is beyond the scope, so this patch seems to be necessary and answer to this problem.

Using overflow keeps line numbering, so should not generate edge effects.

Thank you for pushing this proposal, to be able to close this issue.

[ZerooCool]

#6696

https://github.com/go-gitea/gitea/blob/682da74869050a252c6217d2a51dd1cd97c9a0db/public/css/index.css

https://codecov.io/gh/go-gitea/gitea/pull/6696/diff?src=pr&el=tree-more

It must be checked that the lines are always correctly numbered for the PHP files for example, if that leads to line breaks.

If everything is ok for viewing the WordPress README file that no longer floats.

If the numbering was not affected by the change for PHP files.

Then the issue is resolved and can be closed.

[lafriks]

@ZerooCool issue will be automatically closed when PR is merged

[ZerooCool]

@lafriks
-> #6696 ?

[lafriks]

Yes

[ZerooCool]

I can not install Gitea from Github on Debian.
I do not understand if I need install goland.

I followed another tutorial that refers to the official deposit from the site Gitea, to get to install Gitea:
https://wiki.visionduweb.fr/index.php?title=CMS#Le_tutoriel_pour_installer_Gitea

I thought that on the 24th the fix for no longer having the contents of the WordPress README coming out of the window had been fixed.

The problem persists with the version I loaded on Gitea.

I'm definitely not sure if the fix has been made on Github, and will it be carried also to the loading package on the Gitea official website.

It's really a simple CSS problem.
Can you confirm, or, explain, whether or not the patch has been brought.
I have not seen any changes since 6 days regarding CSS that I would like to correct, to no longer have the WordPress README floating.

Can you add the fix?

In this file :
public/less/_repository.less
Line 330
Add this code for resolve this issue :

            pre {
                overflow: scroll;
            }

[kimpenhaus]

Hi all,

I am not by any means a CSS guru 😆 but shouldn't it be auto instead of scroll:

pre {
        overflow: auto;
}

Whilst having the scrollbars always visible it looks somewhat odd:

Having the scrollbars only visible when content is clipped it looks way better when it is not (at least for me) and fullfills its job in case of overflowing content also:

Sidenode: I am running gitea in a docker conatiner on the latest tag - currenbtly running version ccf4783

[lafriks]

@kimpenhaus should be fixed now in latest version