Scrolling fix

Author: spugachev

src/react-app/src/components/code/code.tsx

@@ -81,7 +81,7 @@ export function Code() {
     <>
       <Navbar />
       <div className="h-full w-full pt-16 mx-auto grid grid-rows-[auto_1fr]">
-        <div className="py-0.5 overflow-x-scroll w-full">
+        <div className="py-0.5 overflow-x-auto w-full">
           <Breadcrumbs />
         </div>
         <div className="h-full w-full overflow-scroll">

src/react-app/src/components/designer-modal.tsx

@@ -101,7 +101,7 @@ export function DesignerModal() {
                       <ArrowLeftIcon className="h-5 w-5" aria-hidden="true" />
                     </button>
                   </div>
-                  <div className="overflow-x-scroll">
+                  <div className="overflow-x-auto">
                     <Dialog.Title
                       as="h3"
                       className="text-lg leading-6 font-medium text-gray-900"
@@ -123,7 +123,7 @@ export function DesignerModal() {
                 </div>
                 <div
                   key={state.computed.selectedValue?.valueId || ""}
-                  className="grid grid-rows-[auto_1fr] min-w-[30vw] min-h-[30vh] max-h-[80vh] overflow-y-scroll"
+                  className="grid grid-rows-[auto_1fr] min-w-[30vw] min-h-[30vh] max-h-[80vh] overflow-y-auto"
                 >
                   <div className="px-2 py-1">
                     <TypeHeader />

src/react-app/src/components/home/blueprints-modal.tsx

@@ -128,7 +128,7 @@ export function BlueprintsModal(props: {
                     <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                   </button>
                 </div>
-                <div className="min-w-[30vw] min-h-[30vh] max-h-[60vh] overflow-y-scroll px-6 py-4">
+                <div className="min-w-[30vw] min-h-[30vh] max-h-[60vh] overflow-y-auto px-6 py-4">
                   <Blueprints
                     multicolumn={false}
                     selectedBlueprintId={selectedBlueprintId}

src/react-app/src/components/home/projects.tsx

@@ -60,7 +60,7 @@ export function Projects() {
         </div>
         <div
           className={Utils.classNames(
-            "border-t border-gray-200 py-5 px-4 overflow-y-scroll h-[65vh] max-h-[1000px]",
+            "border-t border-gray-200 py-5 px-4 overflow-y-auto h-[65vh] max-h-[1000px]",
             hasProjects ? "" : "flex items-center justify-center"
           )}
         >

src/react-app/src/components/workbench/constructs.tsx

@@ -26,15 +26,15 @@ export function Constructs() {
   };
 
   return (
-    <div className="h-full overflow-y-scroll grid grid-rows-[auto_1fr]">
+    <div className="h-full overflow-y-auto grid grid-rows-[auto_1fr]">
       <div className="p-0.5">
         <ConstructsHeader
           key={`search-panel-${filterKey}`}
           filter={filter}
           setFilter={setFilter}
         />
       </div>
-      <div className="overflow-y-scroll pt-1">
+      <div className="overflow-y-auto pt-1">
         <ConstructList filter={filter} setFilter={setFilterOutside} />
       </div>
     </div>

src/react-app/src/components/workbench/details.tsx

@@ -14,14 +14,14 @@ export function Details() {
 
   if (!item || !TypeTest.isFqn(item.value.valueType)) {
     return (
-      <div className="flex items-center justify-center h-full overflow-y-scroll relative border-l border-gray-200 bg-gray-100">
+      <div className="flex items-center justify-center h-full overflow-y-auto relative border-l border-gray-200 bg-gray-100">
         <DetailsEmpty />
       </div>
     );
   }
 
   return (
-    <div className="h-full overflow-y-scroll grid grid-rows-[auto_1fr] border-l border-gray-200 bg-gray-100">
+    <div className="h-full overflow-y-auto grid grid-rows-[auto_1fr] border-l border-gray-200 bg-gray-100">
       <div className="py-0.5 pr-0.5">
         <DetailsHeader
           filter={filter}
@@ -31,7 +31,7 @@ export function Details() {
           setTab={setTab}
         />
       </div>
-      <div className="overflow-y-scroll pt-3 px-4">
+      <div className="overflow-y-auto pt-3 px-4">
         {tab === "methods" && <MethodsDesigner parent={item.value} />}
         {tab === "properties" && (
           <ObjectDesigner modal={false} filter={filter} setFilter={setFilter} />

src/react-app/src/components/workbench/packages-modal.tsx

@@ -202,7 +202,7 @@ export function PackagesModal(props: {
                   <div className="px-6 pt-2 block text-sm font-medium text-gray-700">
                     Installed packages
                   </div>
-                  <div className="min-w-[30vw] min-h-[30vh] max-h-[60vh] overflow-y-scroll ">
+                  <div className="min-w-[30vw] min-h-[30vh] max-h-[60vh] overflow-y-auto ">
                     <PackagesList />
                   </div>
                 </div>

src/react-app/src/components/workbench/workbench.tsx

@@ -16,11 +16,11 @@ export function Workbench() {
       <DesignerModal />
       <div className="h-full w-full pt-16 mx-auto grid grid-cols-[1fr_2fr_1fr]">
         <Constructs />
-        <div className="h-full overflow-y-scroll grid grid-rows-[auto_1fr] border-l border-gray-200">
-          <div className="py-0.5 overflow-x-scroll w-full">
+        <div className="h-full overflow-y-auto grid grid-rows-[auto_1fr] border-l border-gray-200">
+          <div className="py-0.5 overflow-x-auto w-full">
             <Breadcrumbs />
           </div>
-          <div className="overflow-y-scroll pt-1">
+          <div className="overflow-y-auto pt-1">
             <Items />
           </div>
         </div>