Style page-header-detail for small viewports

[laineyhm]

Fixes #1102

Description

This PR adds styling to the small and x-small viewport sizes -- Bootstrap media-breakpoint-down(sm) -- so that the page header detail displays nicely.

-The font-size of the project title is decreased
-The project title has text-overflow: ellipsis; overflow: hidden; and white-space: no-wrap properties, and the page-header detail has overflow: hidden
-The text of the Settings and Share buttons are removed, leaving just their icons.

Type of Change

Only keep lines below that describe this change, then delete the rest.

• UI change

Screenshots

Before:

After:

Checklist

• I have performed a self-review of my own code
• I have reviewed the title/description of this PR which will be used as the squashed PR commit message
• I have commented my code, particularly in hard-to-understand areas
• I have added tests that prove my fix is effective or that my feature works

How to test

• Open developer tools or view from a small mobile device. Try with a project with a long title.

qa.languageforge.org testing

Testers: Check the box and put in a date/time to sign-off/attest the feature works as expected on qa.languageforge.org

• Billy (2022-10-04)
  

• Tester2 (YYYY-MM-DD HH:MM)

[github-actions]

Unit Test Results

368 tests   368 ✔️  9s ⏱️
    1 suites      0 💤
    1 files        0 ❌

Results for commit 857c757.

♻️ This comment has been updated with latest results.