CSS issue in rendered documentation with diff code

[jderusse]

Hello,
The documentation on Symfony has a CSS bug in rendering diff.
This is more visible on the fast track https://symfony.com/doc/current/the-fast-track/en/6-controller.html#adding-an-easter-egg

The issue is the .highlight-diff .highlight>pre has a padding-left: 1.5em
But the .highlight-diff .gd and .highlight-diff .gi (used to display - and +) have a padding-left: 1px + margin-left: -15px.

current rendering	Expected

Maybe this is because the documentation indent diff with spaces (https://github.com/symfony/symfony-docs/blame/5.x/http_cache.rst#L98-L99) ?
But the render is not perfect

From my tests, using a margin: -1.2em; pading: 0 but maybe it vary on browser and OS?

[OskarStark]

Thank you Jérémy, I assigned this issue to Javier 👍

[javiereguiluz]

The problem, as usual with Sphinx, is that if we fix this, we break other things. Check out for example the diff in this page: https://symfony.com/doc/current/page_creation.html#annotation-routes

Here's the comparison of the current CSS and the result of removing the -15px left margin:

Current style	Removing the -15px left margin

The problem is that the + and - markers need to be in the margin of the code block ... otherwise all the code listings break. This works for most of the code blocks, but that one from the Fast Track book is not working. I can't find out why.

[wouterj]

@javiereguiluz I think it's because we incorrectly indent the code in the Symfony docs. Each line that doesn't start with + or - should start with 2 spaces:

bad

.. code-block:: diff

    // src/Controller/LuckyController.php

    // ...
    + use Symfony\Component\Routing\Annotation\Route;

    class LuckyController
    {
    +     /**
    +      * @Route("/lucky/number")
    +      */
        public function number()
        {
            // this looks exactly the same
        }
    }

correct

.. code-block:: diff

      // src/Controller/LuckyController.php

      // ...
    + use Symfony\Component\Routing\Annotation\Route;

      class LuckyController
      {
    +     /**
    +      * @Route("/lucky/number")
    +      */
          public function number()
          {
              // this looks exactly the same
          }
      }

[javiereguiluz]

Oh no! All our diffs are wrong? It will take a lot of time to fix everything from 4.4 to 5.x and upmerge and fix all conflicts. 😢

[wouterj]

@javiereguiluz I'll check this weekend if I can (a) write a DOCtor rule and (b) can automate the fix. If that doesn't take much time, we can fix it quickly.

[jderusse]

I wonder if this is solvable... In the diff format, the not-changed line should start with a space. In that case, I wonder if Sphinx is able to detect the extra space from the indentation?.

ie:

.. code-block:: diff
·····not change <= is it a 5 spaces indentation? or a 4 space indentation + a line starting with space.
····-Delete
····+Add

[wouterj]

@jderusse good point! I think this is why all diffs normally should start with a --- ... / +++ ... line (see the examples you posted). The first line determines the level of indent for the complete next block.

[javiereguiluz]

What could we do here? Is this solvable in an automated way? Thanks!

[javiereguiluz]

Closing as fixed by #15009.