react-base-history-tab

ui/frontend/build_src/src/components/layouts/CreationTabs/creationTabs.css.ts

@@ -1,5 +1,5 @@
 import { style, globalStyle } from "@vanilla-extract/css";
-
+import { vars } from "../../../styles/theme/index.css";
 import {
   tabPanelStyles,
 } from "../../_recipes/tabs_headless.css";
@@ -7,8 +7,28 @@ import {
 
 export const TabpanelScrollFlop = style([tabPanelStyles(), {
   direction: 'rtl',
+  // position: 'relative',
+  overflow: 'overlay',
+  "::-webkit-scrollbar": {
+    position: 'absolute',
+    width: "6px",
+    backgroundColor: vars.backgroundAccentMain,
+  },
+
+  "::-webkit-scrollbar-thumb": {
+    backgroundColor: vars.backgroundDark,
+    borderRadius: "4px",
+  },
+
+
+  // "::-webkit-scrollbar-button: {
+  //   backgroundColor: vars.backgroundDark,
+  // }
+
+
 }]);
 
 globalStyle(`${TabpanelScrollFlop} > *`, {
   direction: 'ltr',
+
 });

ui/frontend/build_src/src/components/layouts/basicDisplay/basicDisplay.css.ts

@@ -39,6 +39,20 @@ export const basicDisplayLayout = style({
       //   "content"`,
     },
   },
+
+
+  // "@media": {
+  //   "screen and (max-width: 800px)": {
+  //     gridTemplateColumns: "1fr",
+  //     gridTemplateRows: "100px 300px 1fr",
+  //     gridTemplateAreas: `
+  //       "header"
+  //       "create"
+  //       "display"
+  //     `,
+  //   },
+  // },
+
 });
 
 // globalStyle(`${basicDisplayLayout}.hideHistory`, {

ui/frontend/build_src/src/components/layouts/basicDisplay/index.tsx

@@ -26,17 +26,15 @@ export default function BasicDisplay() {
 
   useEffect(() => {
 
-    if (void 0 !== layoutRef.current) {
+    if (layoutRef.current != undefined) {
-
       // set the hide-history data attribute
       if (isShowingHistory) {
         layoutRef.current.removeAttribute('data-hide-history');
       }
       else {
         // layoutRef.current.dataset.hideHistory = "true";
-        layoutRef.current.setAttribute('data-hide-history', {});
+        layoutRef.current.setAttribute('data-hide-history', '');
       }
-
     }
   }, [layoutRef, isShowingHistory]);
 

ui/frontend/build_src/src/components/organisms/completedImages/index.tsx

@@ -14,12 +14,12 @@ import {
   buttonStyle
 } from "../../_recipes/button.css";
 
-import { Transition } from '@headlessui/react'
+// import { Transition } from '@headlessui/react'
 
 
-import {
+// import {
-  tabStyles
+//   tabStyles
-} from "../../_recipes/tabs_headless.css";
+// } from "../../_recipes/tabs_headless.css";
 
 export default function CompletedImages(
 

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/index.tsx

@@ -12,7 +12,7 @@ export default function CreationActions() {
   return (
     <div className={CreationActionMain}>
       <MakeButton></MakeButton>
-      <ShowQueue></ShowQueue>
+      {/* <ShowQueue></ShowQueue> */}
     </div>
   );
 }

ui/frontend/build_src/src/pages/Home/home.css.ts

@@ -18,17 +18,17 @@ export const AppLayout = style({
   `,
 
 
-  "@media": {
+  // "@media": {
-    "screen and (max-width: 800px)": {
+  //   "screen and (max-width: 800px)": {
-      gridTemplateColumns: "1fr",
+  //     gridTemplateColumns: "1fr",
-      gridTemplateRows: "100px 300px 1fr",
+  //     gridTemplateRows: "100px 300px 1fr",
-      gridTemplateAreas: `
+  //     gridTemplateAreas: `
-        "header"
+  //       "header"
-        "create"
+  //       "create"
-        "display"
+  //       "display"
-      `,
+  //     `,
-    },
+  //   },
-  },
+  // },
 });
 
 export const HeaderLayout = style({