fix(title): large title aligns with ios spec (#27969)

Issue number: resolves #27966

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The large title on iOS added bottom padding to create space between the
title and the main content. However, this caused tall text to be cut off
on the top.

During development I also noticed that the padding value we were using
does not match the iOS spec.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The padding is now applied to the toolbar that contains the large
title. The title itself is positioned absolutely so adding
padding/margin to it never actually had the desired effect. What we want
is space between the title and any content in sibling toolbars. All the
padding on the title did was shift content within the title up to give
the impression of space between the title and other content.
- Adjusted the actual padding values to align with the iOS spec

Note: The screenshot diffs here are correct. By adding padding to the
toolbar we are increasing the height of the toolbar by 6px. As noted
above, we never truly had spacing between the large title and the
content since the text inside of the title was just being shifted by 6px
to give the impression of spacing.

Additionally, the padding values were further adjusted to match the iOS
spec:

| native | ionic | diff |
| - | - | - |
|
![native](https://github.com/ionic-team/ionic-framework/assets/2721089/10c51b1c-c52c-4871-add4-5af42cfda106)
|
![ionic](https://github.com/ionic-team/ionic-framework/assets/2721089/a1062dbf-4a3e-4022-97a1-dcae8b19725d)
|
![diff](https://github.com/ionic-team/ionic-framework/assets/2721089/c9506f5d-c21f-4d74-93c5-6d1a64ff4023)
|

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.2.4-dev.11691683954.1b6ed4bb`

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/header/header.ios.scss

@@ -51,7 +51,7 @@
 }
 
 .header-collapse-condense ion-toolbar:first-of-type {
-  padding-top: 7px;
+  padding-top: 1px;
 
   z-index: 1;
 }

core/src/components/title/test/basic/title.e2e.ts

@@ -12,3 +12,23 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('title: special characters'), () => {
+    test('should not cut off characters', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title size="large">ÔÔÔ</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `,
+        config
+      );
+
+      const title = page.locator('ion-title');
+      await expect(title).toHaveScreenshot(screenshot('title-characters'));
+    });
+  });
+});

core/src/components/title/title.ios.scss

@@ -49,8 +49,6 @@
 
   min-width: 100%;
 
-  padding-bottom: 6px;
-
   font-size: 34px;
   font-weight: 700;
 

core/src/components/toolbar/toolbar.ios.scss

@@ -84,6 +84,16 @@
 // Toolbar: Large Title
 // --------------------------------------------------
 
+/**
+ * Ensure there is enough spacing between the large
+ * title and any potential content in subsequent
+ * toolbars. We do not add padding to the title
+ * itself because it is absolutely positioned.
+ */
+:host(.toolbar-title-large) {
+  padding-bottom: 7px;
+}
+
 :host(.toolbar-title-large) .toolbar-container {
   flex-wrap: wrap;
   align-items: flex-start;
@@ -94,4 +104,4 @@
   order: map-get($toolbar-order-ios, title-large);
 
   min-width: 100%;
-}
+}