Sequence Diagrams with messageAlign left clips right most text

[kevinawoo]

Describe the bug
Introduced in 9.1.5, when a sequence diagram has messageAlign: left config, the right most text is clipped.

To Reproduce
Steps to reproduce the behavior:

1. Create a diagram with messageAlign: left
2. Notice the end of the right most text

Expected behavior

• The diagram should encompass the text and not clip any text.
• The rect should encompass the text as well

Screenshots

Code Sample
Live Editor example

```mermaid
%%{init: { 'sequence': {'messageAlign': 'left'} }}%%
sequenceDiagram
rect green
    User->>Browser: Click hello
    Browser->>Server: Get /hello HTTP/1.1 <br> Host: example.com <br> Accept: text/html
    Server->>Browser: HTTP/1.1/ 200 OK <br> Content-Type: text/html <br> Content-Length: 42
end
```

Desktop (please complete the following information):

• OS: Mac 12.5

• Browser: Chrome

• Version 104.0.5112.79

• OS: Mermaid CLI, Docker

• Version: v9.1.5

Additional context
Relates to #3011 and #3194.

[Airkro]

Is it possible to make it align with the arrow direction?