Topic: Post history (action=profile;sa=showPosts) sometimes renders [code] too wide (Read 821 times)

.code
{
	color: #000000;
	background-color: #fff;
	font-family: "courier new", "times new roman", monospace;
	font-size: 12px;
	line-height: 1.3em;
	/* Put a nice border around it. */
	border: 1px solid #000000;
	padding: 5px;
	margin: 1px 3px 4px 6px;
	width: 93%;
	/* Don't wrap its contents, and show scrollbars. */
	white-space: nowrap;   <------------------------------------- white-space: normal;
	overflow: auto;
	/* Stop after about 24 lines, and just show a scrollbar. */
	max-height: 24em;
}

--- /var/www/baseline/Themes/default/Profile.template.php	2007-02-03 15:55:14.000000000 +0000
+++ /var/www/modified/Themes/default/Profile.template.php	2023-01-06 00:15:50.000000000 +0000
@@ -341,42 +341,45 @@
 	if (!empty($context['posts']))
 	{
 		// Page numbers.
 		echo '
 			
 				
 					', $txt[139], ': ', $context['page_index'], '
 				
 			
 		';
 
 		// Button shortcuts
 		$quote_button = create_button('quote.gif', 145, 'smf240', 'align="middle"');
 		$reply_button = create_button('reply_sm.gif', 146, 146, 'align="middle"');
 		$remove_button = create_button('delete.gif', 121, 31, 'align="middle"');
 		$notify_button = create_button('notify_sm.gif', 131, 125, 'align="middle"');
 
 		// For every post to be displayed, give it its own subtable, and show the important details of the post.
 		foreach ($context['posts'] as $post)
 		{
+			// style="table-layout: fixed;" was added to each subtable as a partial fix for code sometimes rendering too wide (see https://bitcointalk.org/index.php?topic=5432954).
+			// This could also have been done further up the hierarchy, but this is a more natural place to apply the fix, and (surprisingly) produces slightly superior results, too.
+			// There's a second (progressive enhancement) part to this fix, after this foreach.
 			echo '
-		
+		
 			
 				
 			
 		

 					
 						
 							
 							
 							
 						
 						
 							
 						
 						
@@ -391,40 +394,67 @@
 			if ($post['can_reply'])
 				echo '
 					', $reply_button, '', $context['menu_separator'], '
 					', $quote_button, '';
 			if ($post['can_reply'] && $post['can_mark_notify'])
 				echo '
 								', $context['menu_separator'];
 			if ($post['can_mark_notify'])
 				echo '
 					' . $notify_button . '';
 
 			echo '
 							
 						
 					

 								', $post['counter'], '
 							

 								 ', $post['category']['name'], ' / ', $post['board']['name'], ' / ', $post['subject'], '
 							

 								', $txt[30], ': ', $post['time'], '
 							

 								
', $post['body'], '

 							

 				
';
 		}
 
+		// This is the second part of the fix for code sometimes rendering too wide (the first part is at the top of the preceding foreach).
+		// The first part only prevents the problem from affecting surrounding posts, but when JavaScript is available, a more complete fix can be made.
+		// This code visits each eligible element and (defensively) sets the width to the same computed value.
+		// The width is computed once and then reused, not because of performance considerations (that's a nice consequence), but because that approach fixed some (rare) problem cases that came up in testing.
+		// The initial version of this code didn't account for the presence of 
 elements being browser-dependent (that's what the "target" variable now does).
+		echo '
+		';
+
 		// Show more page numbers.
 		echo '
 		
 			
 				
 			
 		

 					', $txt[139], ': ', $context['page_index'], '
 				
';
 	}
 	// No posts? Just end the table with a informative message.
 	else
 		echo '
 			
 				
 					', $txt[170], '
 				
 			
 		';
 }

--- baseline/Themes/default/Profile.template.php	2007-02-03 15:55:14.000000000 +0000
+++ modified/Themes/default/Profile.template.php	2024-04-27 20:51:35.000000000 +0000
@@ -346,43 +346,48 @@
 				
 					', $txt[139], ': ', $context['page_index'], '
 				
 			
 		';
 
 		// Button shortcuts
 		$quote_button = create_button('quote.gif', 145, 'smf240', 'align="middle"');
 		$reply_button = create_button('reply_sm.gif', 146, 146, 'align="middle"');
 		$remove_button = create_button('delete.gif', 121, 31, 'align="middle"');
 		$notify_button = create_button('notify_sm.gif', 131, 125, 'align="middle"');
 
+		// Controls whether or not an effort is made to prevent "wide" content from breaking the layout (e.g. code blocks containing really long lines).
+		$with_wide_fix = true;
+
 		// For every post to be displayed, give it its own subtable, and show the important details of the post.
 		foreach ($context['posts'] as $post)
 		{
 			echo '
 		
 			
 				

 					
 						
 							
 							
 							
-						
+						', $with_wide_fix ? '
+					

 								', $post['counter'], '
 							

 								 ', $post['category']['name'], ' / ', $post['board']['name'], ' / ', $post['subject'], '
 							

 								', $txt[30], ': ', $post['time'], '
 							

+					' : '', '
 						
 							
 						
 						
 							
 				
 			
 		

 								
', $post['body'], '

 							
';
 
 			if ($post['can_delete'])
 				echo '
 					', $remove_button, '';
 			if ($post['can_delete'] && ($post['can_mark_notify'] || $post['can_reply']))

I also came up with a patch that fixes this problem when previewing PMs and when replying to PMs:

Code:
--- baseline/Themes/default/PersonalMessage.template.php	2006-12-01 15:43:03.000000000 +0000
+++ modified/Themes/default/PersonalMessage.template.php	2024-04-27 20:51:50.000000000 +0000
@@ -855,29 +855,32 @@
 			
';
 		foreach ($context['send_log']['sent'] as $log_entry)
 			echo '', $log_entry, '
';
 		foreach ($context['send_log']['failed'] as $log_entry)
 			echo '', $log_entry, '
';
 		echo '
 				

';
 	}
 
+	// Controls whether or not an effort is made to prevent "wide" content from breaking the layout (e.g. code blocks containing really long lines).
+	$with_wide_fix = true;
+
 	// Show the preview of the personal message.
 	if (isset($context['preview_message']))
 	echo '
 		

-		
+		
 			
 				
 			
 			
 				
 			
 		
', $context['preview_subject'], '

 					', $context['preview_message'], '
 				

';
 
 	// Main message editing box.
 	echo '
@@ -985,30 +988,30 @@
 		
';
 
 	// Some hidden information is needed in order to make the spell checking work.
 	if ($context['show_spellchecking'])
 		echo '
 		
';
 
 	// Show the message you're replying to.
 	if ($context['reply'])
 		echo '
 		

 		

-		
+		
 			
 				
 			
 			
-				
 			
 			
 				
 			
 		
', $txt[319], ': ', $context['quoted_message']['subject'], '

+				

 					
 						
 							
 							
 						
 					
', $txt[318], ': ', $context['quoted_message']['member']['name'], '
', $txt[30], ': ', $context['quoted_message']['time'], '

 				
', $context['quoted_message']['body'], '
';