Topic: Post history (action=profile;sa=showPosts) sometimes renders [code] too wide (Read 803 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'], '

';