[bug#75296] [PATCH website] website: blog: Avoid long words overflowing in post previews.

[bug#75296] [PATCH website] website: blog: Avoid long words overflowing in post previews.

[sirgazil--- via Guix-patches via]

From: Luis Felipe <sirgazil@zoho.com>

This prevents long, unbreakable text (e.g. a commit hash) in post
previews, from overflowing and overlapping the content of other
previews.

* website/themes/initial/css/item-preview.css (.item-preview): Hide
overflow.
---
 website/themes/initial/css/item-preview.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/themes/initial/css/item-preview.css b/website/themes/initial/css/item-preview.css
index 16e698f..750047a 100644
--- a/website/themes/initial/css/item-preview.css
+++ b/website/themes/initial/css/item-preview.css
@@ -5,6 +5,7 @@
 .item-preview:visited {
     color: #4D4D4D;
     display: block;
+    overflow: hidden;
     padding: 10px 15px;
     text-align: left;
 }

base-commit: 53f18814bd231acb5f452de8b511d3260013ca79
-- 
2.46.0

[bug#75296] [PATCH website] website: blog: Avoid long words overflowing in post previews.

[Noé Lopez via Guix-patches via]

Hi,

I think “overflow-wrap: break-word;” would be more appropriate, as it
does not cut off information or letters in half.

Good evening,
Noé

> From: Luis Felipe <sirgazil@zoho.com>
> 
> This prevents long, unbreakable text (e.g. a commit hash) in post
> previews, from overflowing and overlapping the content of other
> previews.
> 
> * website/themes/initial/css/item-preview.css (.item-preview): Hide
> overflow.
> ---
>  website/themes/initial/css/item-preview.css | 1 +
>  1 file changed, 1 insertion(+)
> 
> diff --git a/website/themes/initial/css/item-preview.css b/website/themes/initial/css/item-preview.css
> index 16e698f..750047a 100644
> --- a/website/themes/initial/css/item-preview.css
> +++ b/website/themes/initial/css/item-preview.css
> @@ -5,6 +5,7 @@
>  .item-preview:visited {
>      color: #4D4D4D;
>      display: block;
> +    overflow: hidden;
>      padding: 10px 15px;
>      text-align: left;
>  }
> 
> base-commit: 53f18814bd231acb5f452de8b511d3260013ca79
> -- 
> 2.46.0

[bug#75296] [PATCH website] website: blog: Avoid long words overflowing in post previews.

[Luis Felipe via Guix-patches via]

[-- Attachment #1.1.1: Type: text/plain, Size: 414 bytes --]

Hi Noé,

On 3/01/25 12:56, Noé Lopez wrote:
> Hi,
>
> I think “overflow-wrap: break-word;” would be more appropriate, as it
> does not cut off information or letters in half.
I think you're right. But how about using both? That way, long text 
would be wrapped, and other kinds of content that could extend beyond 
the container's area would be prevented from overflowing.

Thanks for reviewing.

[-- Attachment #1.1.2: OpenPGP public key --]
[-- Type: application/pgp-keys, Size: 2881 bytes --]

[-- Attachment #2: OpenPGP digital signature --]
[-- Type: application/pgp-signature, Size: 495 bytes --]

[bug#75296] [PATCH website v2] website: blog: Prevent content from overflowing in post previews.

[sirgazil--- via Guix-patches via]

From: Luis Felipe <sirgazil@zoho.com>

* website/themes/initial/css/item-preview.css (.item-preview): Break
long words and avoid other possible long, unbreakable content from
extending beyond the area of the container.
---
 website/themes/initial/css/item-preview.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/website/themes/initial/css/item-preview.css b/website/themes/initial/css/item-preview.css
index 16e698f..76d1970 100644
--- a/website/themes/initial/css/item-preview.css
+++ b/website/themes/initial/css/item-preview.css
@@ -5,6 +5,8 @@
 .item-preview:visited {
     color: #4D4D4D;
     display: block;
+    overflow: hidden;
+    overflow-wrap: break-word;
     padding: 10px 15px;
     text-align: left;
 }

base-commit: 53f18814bd231acb5f452de8b511d3260013ca79
-- 
2.46.0

bug#75296: [PATCH website v2] website: blog: Prevent content from overflowing in post previews.

[pelzflorian (Florian Pelz)]

Pushed as 0dad82394930d827738f9cf8c9bbb7fa6ace7965.

Thank you Luis and Noé.

Regards,
Florian