Fix styling/positioning of attachments in `singular` template

[builderpepc]

This is regarding the singular.tsx file which corresponds to the singular WordPress template. The code was written in #89 for #88.

In globals.css, we have defined these styles:

nefac/nefac-website/src/globals.css

Lines 88 to 92 in 73b96db

	.alignright {
	float: right;
	height: auto;
	max-width: 40%;
	}

nefac/nefac-website/src/globals.css

Lines 124 to 128 in 73b96db

	.custom-html-content h5 img.alignright {
	float: right;
	height: auto;
	max-width: 40%;
	}

The alignright class exists on certain elements in the raw HTML returned from WordPress. For example, certain pages have a thumbnail-like image which floats to the right. The styles we have written achieve a similar effect for such images. One page which demonstrates this is the original First Amendment and Free Press page at https://www.nefac.org/1afreepress. You can see how it looks on this branch by visiting the same route on localhost:3000.

However, some pages have file attachments as opposed to thumbnail images. These are represented by a preview image of the attached file (linked to the file URL) along with a small caption. You can find an example on this page. In the HTML, they look something like this:

<figure id="attachment_22519" aria-describedby="caption-attachment-22519" style="width: 172px" class="wp-caption alignright">
  <a href="https://www.nefac.org/wp-content/uploads/2025/06/nefac_wfma_mass_ag.pdf"><img data-od-replaced-sizes="(max-width: 172px) 100vw, 172px" data-od-xpath="/HTML/BODY/MAIN[@id='site-content']/*[1][self::ARTICLE]/*[2][self::DIV]/*[1][self::DIV]/*[1][self::FIGURE]/*[1][self::A]/*[1][self::IMG]" data-dominant-color="e5e6e8" data-has-transparency="false" style="--dominant-color: #e5e6e8;" decoding="async" class="wp-image-22519 not-transparent" src="https://www.nefac.org/wp-content/uploads/2025/06/062725.avif" alt="" width="172" height="224" srcset="https://www.nefac.org/wp-content/uploads/2025/06/062725.avif 1068w, https://www.nefac.org/wp-content/uploads/2025/06/062725-231x300.avif 231w, https://www.nefac.org/wp-content/uploads/2025/06/062725-787x1024.avif 787w, https://www.nefac.org/wp-content/uploads/2025/06/062725-768x1000.avif 768w" sizes="(782px < width) 172px, (max-width: 172px) 100vw, 172px" googl="true"></a>
  <figcaption id="caption-attachment-22519" class="wp-caption-text"><strong>JUNE 27 LETTER</strong></figcaption>
</figure>

We noticed in Devtools that the float: right style gets overridden in this case because float is seemingly not compatible with the flex-based container element we have created in single.tsx. This is confusing to us, because it clearly works for the regular thumbnail images.

The goal for this ticket is to make "attachment" images appear similarly in the rendered to template compared to how they appear on the original WordPress pages.

nefac.org	rendered Faust.js template

[builderpepc]

If it's helpful, these were found in NEFAC's custom-edited theme:

/* ALIGNMENT CLASSES */

	.alignleft,
	.alignright,
	.entry-content > .alignleft,
	.entry-content > p .alignleft,
	.entry-content > .wp-block-image .alignleft,
	.entry-content > .alignright,
	.entry-content > p .alignright,
	.entry-content > .wp-block-image .alignright,
	[class*="wp-block"].alignwide:not(.has-background) [class*="__inner-container"] > .alignleft,
	[class*="wp-block"].alignwide:not(.has-background) [class*="__inner-container"] > p .alignleft,
	[class*="wp-block"].alignwide:not(.has-background) [class*="__inner-container"] > .wp-block-image .alignleft,
	[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
	[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
	[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft,
	[class*="wp-block"].alignwide:not(.has-background) [class*="__inner-container"] > .alignright,
	[class*="wp-block"].alignwide:not(.has-background) [class*="__inner-container"] > p .alignright,
	[class*="wp-block"].alignwide:not(.has-background) [class*="__inner-container"] > .wp-block-image .alignright,
	[class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
	[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
	[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
		max-width: 29rem;
	}