Fleet UI: Fix responsiveness with added installer data (#29541)

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwareInstallerCard/SoftwareInstallerCard.tsx

@@ -351,61 +351,65 @@ const SoftwareInstallerCard = ({
 
   return (
     <Card borderRadiusSize="xxlarge" includeShadow className={baseClass}>
-      <div className={`${baseClass}__row-1`}>
-        <div className={`${baseClass}__row-1--responsive`}>
-          <InstallerDetailsWidget
-            softwareName={softwareInstaller?.name || name}
-            installerType={installerType}
-            versionInfo={versionInfo}
-            addedTimestamp={addedTimestamp}
-            sha256={sha256}
-            isFma={isFleetMaintainedApp}
-          />
-          <div className={`${baseClass}__tags-wrapper`}>
-            {Array.isArray(automaticInstallPolicies) &&
-              automaticInstallPolicies.length > 0 && (
+      <div className={`${baseClass}__installer-header`}>
+        <div className={`${baseClass}__row-1`}>
+          <div className={`${baseClass}__row-1--responsive-wrap`}>
+            <InstallerDetailsWidget
+              softwareName={softwareInstaller?.name || name}
+              installerType={installerType}
+              versionInfo={versionInfo}
+              addedTimestamp={addedTimestamp}
+              sha256={sha256}
+              isFma={isFleetMaintainedApp}
+            />
+            <div className={`${baseClass}__tags-wrapper`}>
+              {Array.isArray(automaticInstallPolicies) &&
+                automaticInstallPolicies.length > 0 && (
+                  <TooltipWrapper
+                    showArrow
+                    position="top"
+                    tipContent={
+                      automaticInstallPolicies.length === 1
+                        ? "A policy triggers install."
+                        : `${automaticInstallPolicies.length} policies trigger install.`
+                    }
+                    underline={false}
+                  >
+                    <Tag icon="refresh" text="Automatic install" />
+                  </TooltipWrapper>
+                )}
+              {isSelfService && (
                 <TooltipWrapper
                   showArrow
                   position="top"
-                  tipContent={
-                    automaticInstallPolicies.length === 1
-                      ? "A policy triggers install."
-                      : `${automaticInstallPolicies.length} policies trigger install.`
-                  }
+                  tipContent={SELF_SERVICE_TOOLTIP}
                   underline={false}
                 >
-                  <Tag icon="refresh" text="Automatic install" />
+                  <Tag icon="user" text="Self-service" />
                 </TooltipWrapper>
               )}
-            {isSelfService && (
-              <TooltipWrapper
-                showArrow
-                position="top"
-                tipContent={SELF_SERVICE_TOOLTIP}
-                underline={false}
-              >
-                <Tag icon="user" text="Self-service" />
-              </TooltipWrapper>
+            </div>
+          </div>
+          <div className={`${baseClass}__actions-wrapper`}>
+            {showActions && (
+              <SoftwareActionButtons
+                installerType={installerType}
+                onDownloadClick={onDownloadClick}
+                onDeleteClick={onDeleteClick}
+                onEditSoftwareClick={onEditSoftwareClick}
+                gitOpsModeEnabled={gitOpsModeEnabled}
+                repoURL={repoURL}
+              />
             )}
           </div>
         </div>
-        <div className={`${baseClass}__actions-wrapper`}>
-          {showActions && (
-            <SoftwareActionButtons
-              installerType={installerType}
-              onDownloadClick={onDownloadClick}
-              onDeleteClick={onDeleteClick}
-              onEditSoftwareClick={onEditSoftwareClick}
-              gitOpsModeEnabled={gitOpsModeEnabled}
-              repoURL={repoURL}
-            />
+        <div className={`${baseClass}__row-2`}>
+          {gitOpsModeEnabled && isCustomPackage && (
+            <div className={`${baseClass}__yaml-button-wrapper`}>
+              <Button onClick={onToggleViewYaml}>View YAML</Button>
+            </div>
           )}
         </div>
-        {gitOpsModeEnabled && isCustomPackage && (
-          <div className={`${baseClass}__yaml-button-wrapper`}>
-            <Button onClick={onToggleViewYaml}>View YAML</Button>
-          </div>
-        )}
       </div>
       <div className={`${baseClass}__installer-status-table`}>
         <InstallerStatusTable

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwareInstallerCard/_styles.scss

@@ -18,19 +18,38 @@
     width: 100%;
   }
 
+  &__installer-header,
   &__row-1 {
     display: flex;
     width: 100%;
     gap: $pad-medium;
   }
 
-  // SoftwareDetailsWidget and Tags wrap onto 2 lines on low widths
   &__row-1--responsive {
     display: flex;
     flex-grow: 1;
     justify-content: space-between;
+  }
 
-    @media (max-width: ($break-md - 1)) {
+  // Lots of data (10 items) on one line responsive fix (#29397)
+  @media (max-width: ($table-controls-break)) {
+    .installer-details-widget__details {
+      flex-wrap: wrap;
+    }
+    // SoftwareDetailsWidget and Tags wrap onto 2 lines on low widths
+    &__row-1--responsive-wrap {
+      flex-direction: column;
+      gap: $pad-medium;
+    }
+
+    // Buttons align top of card when alone (not middle with pills/yaml button)
+    &__actions {
+      .children-wrapper {
+        align-self: top;
+      }
+    }
+    // View YAML (gitops) button wrapped onto third line
+    &__installer-header {
       flex-direction: column;
       gap: $pad-medium;
     }