added media queries

mlrun · Oct 15, 2024 · e25076f · e25076f
1 parent dff02d2
commit e25076f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/src/components/ActionBar/ActionBar.js b/src/components/ActionBar/ActionBar.js
@@ -312,18 +312,18 @@ const ActionBar = ({
                 </Field>
               </div>
             )}
+            {filterMenuModal && (
+              <FilterMenuModal
+                applyChanges={filterMenuModal => applyChanges(formState.values, filterMenuModal)}
+                filterMenuName={filterMenuName}
+                initialValues={filterMenuModalInitialState}
+                restartFormTrigger={`${tab}`}
+                values={filterMenuModal.values}
+              >
+                {children}
+              </FilterMenuModal>
+            )}
           </div>
-          {filterMenuModal && (
-            <FilterMenuModal
-              applyChanges={filterMenuModal => applyChanges(formState.values, filterMenuModal)}
-              filterMenuName={filterMenuName}
-              initialValues={filterMenuModalInitialState}
-              restartFormTrigger={`${tab}`}
-              values={filterMenuModal.values}
-            >
-              {children}
-            </FilterMenuModal>
-          )}
           {(withRefreshButton || !isEmpty(actionButtons)) && (
             <div className="action-bar__actions">
               {actionButtons.map(

diff --git a/src/components/Jobs/Jobs.js b/src/components/Jobs/Jobs.js
@@ -166,7 +166,7 @@ const Jobs = ({ fetchAllJobRuns, fetchJobFunction, fetchJobs }) => {
         </div>
         {selectedTab && (
           <div className="content">
-            <div className="content__action-bar-wrapper">
+            <div className="content__action-bar-wrapper content__action-bar-wrapper_wrapped">
               <ContentMenu
                 activeTab={selectedTab}
                 onClick={handleTabChange}

diff --git a/src/components/ModelsPage/Models/ModelsView.js b/src/components/ModelsPage/Models/ModelsView.js
@@ -77,7 +77,7 @@ const ModelsView = React.forwardRef(
       <>
         <div className="models" ref={modelsRef}>
           <div className="table-container">
-            <div className="content__action-bar-wrapper">
+            <div className="content__action-bar-wrapper  content__action-bar-wrapper_wrapped">
               <ModelsPageTabs />
               {/* TODO: remove from demo in 1.7 */}
               <ArtifactsActionBar

diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -96,6 +96,17 @@ body {
     align-items: center;
     padding: 4px 0 15px 0;
 
+    &.content__action-bar-wrapper_wrapped {
+      @media screen and (max-width: 1500px) {
+        flex-wrap: wrap;
+
+        .action-bar {
+          justify-content: space-between;
+          margin-top: 10px;
+        }
+      }
+    }
+
     &_hidden {
       display: none;
     }