Nevermind!  Figured out the correct way to do it seems to be to create a new mod that overrides the css.  If it's any use to anyone else I just create this structure.

tdntheme/
├── composer.json         # Plugin metadata
├── elgg-plugin.php       # Plugin configuration  
├── README.md
└── views/
    └── default/
        └── tdntheme/
            └── css/
                └── custom.css   # Your CSS overrides

And added this to the custom.css:

/* ==========================================================================
   Walled Garden (Login Page) Mobile Fixes
   ========================================================================== */

@media (max-width: 768px) {
    /* Fix: Login page content getting cut off on mobile */
    .elgg-page-walled-garden > .elgg-inner {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 1rem;
        box-sizing: border-box;
    }

    /* Make the heading wrap properly */
    .elgg-heading-walled-garden {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Ensure page body doesn't overflow */
    .elgg-page-walled-garden > .elgg-inner > .elgg-page-body {
        padding: 0.5rem !important;
    }
}

/*
=== Didn't need this but if the site title was longer... ===
@media (max-width: 480px) {
    .elgg-heading-walled-garden {
        font-size: 1.2rem !important;
    }
}
*/

/* ==========================================================================
   Mobile Responsive Fixes (Logged-in pages)
   ========================================================================== */

@media (max-width: 768px) {
    /* Fix: Site title getting cut off / center-justified on mobile */
    .elgg-page-header .elgg-heading-site,
    .elgg-page-topbar .elgg-heading-site,
    .elgg-heading-site {
        text-align: left;
        overflow: visible;
        white-space: normal;
        word-wrap: break-word;
    }

    /* Ensure header content doesn't overflow */
    .elgg-page-header,
    .elgg-page-topbar {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Make site title more readable on small screens */
    .elgg-heading-site a {
        font-size: 1.2em;
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    /* Extra small devices */
    .elgg-heading-site a {
        font-size: 1em;
    }
}

/* ==========================================================================
   Group Page / Owner Block - Mobile Fixes
   ========================================================================== */

@media (max-width: 768px) {
    /* Stack image and description vertically on mobile */
    .elgg-image-block.groups-profile {
        flex-direction: column !important;
        align-items: center;
    }

    /* Limit the group icon size on mobile */
    .elgg-image-block.groups-profile > .elgg-image,
    .elgg-image-block.groups-profile img {
        max-width: 150px !important;
        height: auto !important;
    }

    /* Give the description full width when stacked */
    .elgg-image-block.groups-profile > .elgg-body,
    .elgg-image-block.groups-profile .elgg-profile-fields {
        width: 100%;
        text-align: left;
        margin-top: 1rem;
    }
}

There's probably some work to do with Pages too, but I ran out of time.  I'll find some time this week to do those, find the right-hand-side Pages menu that vanished somewhere along the line, and fix my personal bug-bear: members lists and counts including banned users literally everywhere...

I didn't have time to respond; you were quicker.

This is a problem with the current Elgg layout.

We often have to fix it using styles in custom plugins, but there's no single solution since 3rd-party plugins can also have their own styles, etc.

I'm glad you fixed the issues in your custom plugin!