text / element alignment

I don't think that there is a clear-cut answer that applies to every situation here, @turpentyne. You might find some useful examples in the Layout section of the Google Material Design references.

My personal PoV is this: Do I perceive the elements on the page as forming a group, indicating they belong together as a whole? Or do they seem to be different items that happen to be shown in the same context?

Let me explain using your example screenshots.

In the left image, due to its indentation, I "see" that first paragraph to be separate from the second paragraph and the bottom. While they form a combined page, that gray box could be a banner or notification, for example.

By aligning both paragraphs to the same left edge, as in the right image, I get the visual impression that they form a unit. The first paragraph is simply highlighted versus the second one, but I perceive of them as parts of the exact same multi-paragraph text.

The detail that throws me off in the right image, though, is that the button is left-aligned with both paragraphs. I'd expect that to be left-aligned with the gray box for a more cohesive unit (might be related to the Gestalt Law of Closure).

Mind you, this is just a perspective of a single person. 😉 But key is to test with users if the alignment works for them.

tl,rd: I don't think there's a simple hard rule that you can apply in every case.

In my opinion, the question is poorly posed because it omits relevant functional and conceptual data.

1. I don't think absolute design parameters can be established for mobile screens as unique elements, since they all come from an original desktop design. Even mobile apps have a desktop design. Based on this, the design applied to device screens doesn't respond solely to a mobile screen format, but to the originally created design concept.

If the original desktop design proposes a text frame that exceeds its limits as a relevant conceptual element, perhaps the adaptation to device screens should follow the same guidelines.

_{Original page design}

This is a real example:

_{Original page design}

If the original desktop design has boxed text aligned with the body text, it makes sense to keep the same design on the mobile version:

_{Original page design}

2. There is also a functional aspect that affects design for mobile screens: the shape of the screen, which creates a border, just like the page does in a book, and the outer spaces (margins). Both elements influence the entire design, limiting the design's adaptability from desktop to mobile.

Conclusion: In my opinion, as a designer, there are no rules other than those defined in the design itself, adapted to the "limitations" granted by the adaptation to the device screen.