i think whole webstuff is made by assholes who like to prick needles into webmasters ass

for example i found this to fix the pre overflow here

https://weblog.west-wind.com/posts/2016/feb/15/flexbox-containers-pre-tags-and-managing-overflow

even this could be outdated

that's the main issue here. when you go and search for a solution to a problem that shoud not even exist, the world has already changed a lot

and where's the web "authority" located anyway? w3schools? mozilla docs? stackoverflow?

oh and when docs are too difficult to interpret, you get simpler tutorials made by reader to his / her best understanding. and mistakes happen

i currently came up with this

diff --git a/tpl/styles.css b/tpl/styles.css
index e43946c..3b6d0a9 100644
--- a/tpl/styles.css
+++ b/tpl/styles.css
@@ -25,16 +25,13 @@ li
 
 pre
 {
-	width:  fit-content;
-	height: fit-content;
+	max-width: min-content;
 	
 	font-family: "DejaVu Sans Mono", monospace;
 	
-	font-size:     13px;
-	white-space:   pre-wrap;
-	text-align:    left;
-	overflow:      auto;
-	overflow-wrap: anywhere;
+	font-size:  13px;
+	text-align: left;
+	overflow:   auto;
 	
 	border:  1px solid #808080;
 	padding: 1em;
@@ -52,7 +49,7 @@ p
 
 img
 {
-	max-width:  100%;
+	max-width: 100%;
 	
 	vertical-align: top;
 	object-fit:     contain;
@@ -60,8 +57,13 @@ img
 	margin: 1px;
 }
 
+ul
+{
+	padding: 0;
+	
+	list-style-type: none;
+}
 
-ul { list-style-type: none; }
 
 a { color: #1a0dd6; }
 
@@ -84,7 +86,7 @@ a:has(> img)
 }
 
 
-@media ( prefers-color-scheme: dark )
+@media(prefers-color-scheme: dark)
 {
 	::selection
 	{
@@ -127,6 +129,8 @@ a:has(> img)
 
 .main_container
 {
+	min-width: 0;
+	
 	text-align: center;
 	
 	padding: 0;
@@ -141,11 +145,11 @@ a:has(> img)
 
 .main_header
 {
-	width: fit-content;
+	max-width: max-content;
 	
 	font-size: 50px;
 	
-	margin: 0.5em auto 1em;
+	margin: 1em auto;
 }
 
 
@@ -170,7 +174,7 @@ a:has(> img)
 
 .main_list
 {
-	width: fit-content;
+	max-width: max-content;
 	
 	margin: 5em auto;
 }
@@ -191,7 +195,7 @@ a:has(> img)
 
 .main_home_top, .main_home_bottom
 {
-	width: fit-content;
+	max-width: max-content;
 	
 	font-size: 25px;
 	
@@ -200,7 +204,7 @@ a:has(> img)
 
 .main_date
 {
-	width: fit-content;
+	max-width: max-content;
 	
 	font-size: 17px;
 	
@@ -209,7 +213,7 @@ a:has(> img)
 
 .main_title
 {
-	width: fit-content;
+	max-width: max-content;
 	
 	font-size: 30px;
 	
@@ -218,8 +222,6 @@ a:has(> img)
 
 .main_entry
 {
-	width: fit-content;
-	
 	font-size:  20px;
 	text-align: left;
 	
@@ -229,12 +231,11 @@ a:has(> img)
 .main_mtime
 {
 	max-width: 30em;
-	width:     fit-content;
 	
 	font-size:  14px;
 	text-align: left;
 	
-	margin: 1em auto 2.5em;
+	margin: 1em auto;
 }
 
 
@@ -244,12 +245,12 @@ a:has(> img)
 
 .main_footer
 {
-	width: fit-content;
+	max-width: max-content;
 	
 	font-size:  12px;
 	text-align: center;
 	
-	margin: 10em auto 2em;
+	margin: 10em auto;
 }
 
 

or maybe just

commit 1360f479b341b2d7e4bbe631a7404617e7c7167e
Author: ketas <ketas@green.sau.si.pri.ee>
Date:   Mon Jul 27 14:38:37 2026 +0300

    allow pre to both fit width and scroll on overflow

diff --git a/tpl/styles.css b/tpl/styles.css
index e43946c..dc18156 100644
--- a/tpl/styles.css
+++ b/tpl/styles.css
@@ -25,16 +25,11 @@ li
 
 pre
 {
-	width:  fit-content;
-	height: fit-content;
-	
 	font-family: "DejaVu Sans Mono", monospace;
 	
 	font-size:     13px;
-	white-space:   pre-wrap;
 	text-align:    left;
 	overflow:      auto;
-	overflow-wrap: anywhere;
 	
 	border:  1px solid #808080;
 	padding: 1em;
@@ -127,6 +122,8 @@ a:has(> img)
 
 .main_container
 {
+	min-width: 0;
+	
 	text-align: center;
 	
 	padding: 0;
@@ -218,8 +215,6 @@ a:has(> img)
 
 .main_entry
 {
-	width: fit-content;
-	
 	font-size:  20px;
 	text-align: left;
 	

btw this was created with

git log -p --full-diff 4863900b50600e36276e4a6d24611a0dcade8cb6..1360f479b341b2d7e4bbe631a7404617e7c7167e

i also consider git being made by satan himself, probably. because you never get it. oh and in ~2010 i was already using git