[BUGFIX] Correct bookmark form styling

Adjust the whitespace of the bookmark
edit form in the backend toolbar, to look
more aligned to the other dropdowns.

Resolves:  #98514
Releases: main
Change-Id: If25101e0ceb3568d086c38f5b4f193be90b58620
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/75972
Tested-by: core-ci <typo3@b13.com>
Tested-by: Benni Mack <benni@typo3.org>
Tested-by: Oliver Hader <oliver.hader@typo3.org>
Reviewed-by: Benni Mack <benni@typo3.org>
Reviewed-by: Oliver Hader <oliver.hader@typo3.org>

Build/Sources/TypeScript/backend/toolbar/shortcut-menu.ts

@@ -33,9 +33,9 @@ enum Identifiers {
 
   shortcutFormTitleSelector = 'input[name="shortcut-title"]',
   shortcutFormGroupSelector = 'select[name="shortcut-group"]',
-  shortcutFormSaveSelector = '.shortcut-form-save',
-  shortcutFormCancelSelector = '.shortcut-form-cancel',
-  shortcutFormSelector = '.shortcut-form',
+  shortcutFormSaveSelector = '.t3js-shortcut-form-save',
+  shortcutFormCancelSelector = '.t3js-shortcut-form-cancel',
+  shortcutFormSelector = '.t3js-shortcut-form',
 }
 
 /**

typo3/sysext/backend/Resources/Private/Templates/ToolbarItems/ShortcutToolbarItemEditForm.html

@@ -1,19 +1,20 @@
-<form class="shortcut-form" role="form" data-shortcutid="{selectedShortcutId}">
-    <h3 class="dropdown-header">
+<form class="t3js-shortcut-form" role="form" data-shortcutid="{selectedShortcutId}">
+    <h3 class="dropdown-headline">
         {f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:toolbarItems.bookmarksEdit')}
     </h3>
     <hr class="dropdown-divider" aria-hidden="true">
-    <div class="form-group">
-        <input type="text" class="form-control" name="shortcut-title" value="{selectedShortcut.label}"/>
+    <div class="dropdown-item-text">
+        <div class="form-group">
+            <input type="text" class="form-control" name="shortcut-title" value="{selectedShortcut.label}"/>
+        </div>
+        <div class="form-group">
+            <select class="form-select" name="shortcut-group">
+                <f:for each="{shortcutGroups}" key="shortcutGroupId" as="shortcutGroupTitle">
+                    <option value="{shortcutGroupId}" {f:if(condition: '{selectedShortcutGroupId} == {shortcutGroupId}', then: 'selected="selected"')}>{shortcutGroupTitle}</option>
+                </f:for>
+            </select>
+        </div>
+        <input type="button" class="btn btn-default t3js-shortcut-form-cancel" value="Cancel"/>
+        <input type="button" class="btn btn-success t3js-shortcut-form-save" value="Save"/>
     </div>
-    <div class="form-group">
-        <select class="form-select" name="shortcut-group">
-            <f:for each="{shortcutGroups}" key="shortcutGroupId" as="shortcutGroupTitle">
-                <option value="{shortcutGroupId}" {f:if(condition: '{selectedShortcutGroupId} == {shortcutGroupId}', then: 'selected="selected"')}>{shortcutGroupTitle}</option>
-            </f:for>
-        </select>
-    </div>
-    <hr class="dropdown-divider" aria-hidden="true">
-    <input type="button" class="btn btn-default shortcut-form-cancel" value="Cancel"/>
-    <input type="button" class="btn btn-success shortcut-form-save" value="Save"/>
 </form>

typo3/sysext/core/Tests/Acceptance/Application/Topbar/BookmarkCest.php

@@ -110,9 +110,9 @@ public function checkIfEditBookmarkItemWorks(ApplicationTester $I): void
         $this->clickBookmarkDropdownToggleInTopbar($I);
         $firstShortcutSelector = self::$topBarModuleSelector . ' .t3js-topbar-shortcut';
         $I->click('.t3js-shortcut-edit', $firstShortcutSelector);
-        $secondShortcutSelector = self::$topBarModuleSelector . ' form.shortcut-form';
+        $secondShortcutSelector = self::$topBarModuleSelector . ' form.t3js-shortcut-form';
         $I->fillField($secondShortcutSelector . ' input[name="shortcut-title"]', 'Scheduled tasks renamed');
-        $I->click('.shortcut-form-save', $secondShortcutSelector);
+        $I->click('.t3js-shortcut-form-save', $secondShortcutSelector);
 
         // searching in a specific context fails with an "Stale Element Reference Exception"
         // see http://docs.seleniumhq.org/exceptions/stale_element_reference.jsp