fix(styles): fix regressions in operations on smaller screens (#9425)

Refs #8940

src/style/_layout.scss

@@ -342,13 +342,12 @@
 
     .opblock-summary-path
     {
-        flex-shrink: 0;
+        flex-shrink: 1;
     }
 
     @media (max-width: 640px) {
       .opblock-summary-path
       {
-        flex-shrink: 1;
         max-width: 100%;
       }
     }
@@ -375,6 +374,7 @@
     .opblock-summary-path-description-wrapper
     {
         display: flex;
+        flex-direction: row;
         align-items: center;
         flex-wrap: wrap;
         gap: 0px 10px;
@@ -385,11 +385,10 @@
     }
 
     @media (max-width: 550px) {
-        .opblock-summary-path-description-wrapper
-        {
-            flex-direction: column;
-            align-items: start;
-        }
+      .opblock-summary-path-description-wrapper {
+        flex-direction: column;
+        align-items: flex-start;
+      }
     }
 
     .opblock-summary
@@ -837,16 +836,16 @@
             justify-content: flex-end;
         }
 
-        /* 
+        /*
         Target Authorize Button in schemes wrapper
         This was added here to fix responsiveness issues with the authorize button
         within the schemes wrapper without affecting other instances of it's usage
         */
-        .auth-wrapper 
+        .auth-wrapper
         {
             flex: none;
             justify-content: none;
-            
+
             .authorize
             {
                 padding-right: 20px;