@griddo/ax 1.56.10 → 1.57.3

package/config/griddo-config.js

@@ -50,6 +50,7 @@ const griddoAxAliases = {
   "@ax/modules": path.resolve(__dirname, "../src/modules"),
   "@ax/routes": path.resolve(__dirname, "../src/routes"),
   "@ax/types": path.resolve(__dirname, "../src/types"),
+  "@ax/schemas": path.resolve(__dirname, "../src/schemas"),
   ...getComponentsLibAliases(),
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.56.10",
+  "version": "1.57.3",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -233,5 +233,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "586a090d1cb535fa0577fd12d2e874860c1fc3b8"
+  "gitHead": "419582349c3dc66afdbfce7af4ad78a9138eda4f"
 }

package/src/components/ActionMenu/index.tsx

@@ -33,7 +33,7 @@ const ActionMenu = (props: IProps): JSX.Element => {
   return (
     <S.Wrapper className={className}>
       <Tooltip content={tooltip} hideOnClick>
-        <FloatingMenu Button={MoreInfoButton} isWide={true}>
+        <FloatingMenu Button={MoreInfoButton}>
           <S.ActionMenu>{options.map((item: IOption) => ActionMenuItem(item))}</S.ActionMenu>
         </FloatingMenu>
       </Tooltip>

package/src/components/Fields/ComponentArray/MixableComponentArray/index.tsx

@@ -23,6 +23,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     activatedModules,
     objKey,
     field,
+    mandatory,
   } = props;
 
   const type = getTypefromKey(objKey);
@@ -54,9 +55,13 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 
   const showAddItemButton = !maxItems || fixedValue.length < maxItems;
 
+  const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
+
   return (
     <S.Wrapper>
-      <S.Title>{title}</S.Title>
+      <S.Title>
+        {title} <Asterisk />
+      </S.Title>
       <S.ItemRow>
         <S.Subtitle>{fixedValue && fixedValue.length} items</S.Subtitle>
         {showAddItemButton && !disabled && (
@@ -115,6 +120,7 @@ export interface IMixableComponentArrayProps {
   activatedModules: string[];
   objKey: string;
   field: any;
+  mandatory?: boolean;
 }
 
 export default MixableComponentArray;

package/src/components/Fields/ComponentArray/MixableComponentArray/style.tsx

@@ -1,50 +1,55 @@
 import styled from "styled-components";
 
-export const Wrapper = styled.div`
-`;
+const Wrapper = styled.div``;
 
-export const Title = styled.p`
-  ${p => p.theme.textStyle.headingXXS};
-  color: ${p => p.theme.color.textMediumEmphasis};
-  padding-bottom: ${p => p.theme.spacing.xs};
-  border-bottom: 1px solid ${p => p.theme.color.uiLine};
+const Title = styled.p`
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
 `;
 
-export const Component = styled.button`
-  ${p => p.theme.textStyle.fieldLabel};
-  color: ${p => p.theme.color.textHighEmphasis};
+const Component = styled.button`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.color.textHighEmphasis};
   display: block;
-  height: ${p => p.theme.spacing.l};
-  background: ${p => p.theme.color.uiBackground02};
+  height: ${(p) => p.theme.spacing.l};
+  background: ${(p) => p.theme.color.uiBackground02};
   border: 1px solid transparent;
   width: 100%;
   text-align: left;
   cursor: pointer;
-  margin-bottom: ${p => p.theme.spacing.xs};
-  padding: 0 ${p => p.theme.spacing.s};
-  border-radius: ${p => p.theme.radii.s};
-  box-shadow: ${p => p.theme.shadow.field};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  padding: 0 ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  box-shadow: ${(p) => p.theme.shadow.field};
 
   &:hover {
-    background: ${p => p.theme.color.overlayHoverPrimary};
+    background: ${(p) => p.theme.color.overlayHoverPrimary};
   }
 
   &:focus,
   &:active {
-    background: ${p => p.theme.color.overlayFocusPrimary};
-    border: 1px solid ${p => p.theme.color.interactive01};
+    background: ${(p) => p.theme.color.overlayFocusPrimary};
+    border: 1px solid ${(p) => p.theme.color.interactive01};
     outline: none;
   }
 `;
 
-export const ItemRow = styled.div`
+const ItemRow = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: ${p => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Subtitle = styled.span`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textLowEmphasis};
 `;
 
-export const Subtitle = styled.span`
-  ${p => p.theme.textStyle.uiXS};
-  color: ${p => p.theme.color.textLowEmphasis};
+const Asterisk = styled.span`
+  color: ${(p) => p.theme.color.error};
 `;
+
+export { Wrapper, Title, Component, ItemRow, Subtitle, Asterisk };

package/src/components/Fields/ComponentArray/SameComponentArray/index.tsx

@@ -23,6 +23,7 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
     activatedModules,
     objKey,
     field,
+    mandatory,
   } = props;
 
   const type = getTypefromKey(objKey);
@@ -53,9 +54,13 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 
   const showAddItemButton = !maxItems || value.length < maxItems;
 
+  const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
+
   return (
     <S.Wrapper>
-      <S.Title>{title}</S.Title>
+      <S.Title>
+        {title} <Asterisk />
+      </S.Title>
       <S.ItemRow>
         <S.Subtitle>{value && value.length} items</S.Subtitle>
         {showAddItemButton && !disabled && (
@@ -110,6 +115,7 @@ export interface ISameComponentArrayProps {
   activatedModules: string[];
   objKey: string;
   field: any;
+  mandatory?: boolean;
 }
 
 export default SameComponentArray;

package/src/components/Fields/ComponentArray/SameComponentArray/style.tsx

@@ -1,50 +1,55 @@
 import styled from "styled-components";
 
-export const Wrapper = styled.div`
-`;
+const Wrapper = styled.div``;
 
-export const Title = styled.p`
-  ${p => p.theme.textStyle.headingXXS};
-  color: ${p => p.theme.color.textMediumEmphasis};
-  padding-bottom: ${p => p.theme.spacing.xs};
-  border-bottom: 1px solid ${p => p.theme.color.uiLine};
+const Title = styled.p`
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
 `;
 
-export const Component = styled.button`
-  ${p => p.theme.textStyle.fieldLabel};
-  color: ${p => p.theme.color.textHighEmphasis};
+const Component = styled.button`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.color.textHighEmphasis};
   display: block;
-  height: ${p => p.theme.spacing.l};
-  background: ${p => p.theme.color.uiBackground02};
+  height: ${(p) => p.theme.spacing.l};
+  background: ${(p) => p.theme.color.uiBackground02};
   border: 1px solid transparent;
   width: 100%;
   text-align: left;
   cursor: pointer;
-  margin-bottom: ${p => p.theme.spacing.xs};
-  padding: 0 ${p => p.theme.spacing.s};
-  border-radius: ${p => p.theme.radii.s};
-  box-shadow: ${p => p.theme.shadow.field};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  padding: 0 ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  box-shadow: ${(p) => p.theme.shadow.field};
 
   &:hover {
-    background: ${p => p.theme.color.overlayHoverPrimary};
+    background: ${(p) => p.theme.color.overlayHoverPrimary};
   }
 
   &:focus,
   &:active {
-    background: ${p => p.theme.color.overlayFocusPrimary};
-    border: 1px solid ${p => p.theme.color.interactive01};
+    background: ${(p) => p.theme.color.overlayFocusPrimary};
+    border: 1px solid ${(p) => p.theme.color.interactive01};
     outline: none;
   }
 `;
 
-export const ItemRow = styled.div`
+const ItemRow = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: ${p => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Subtitle = styled.span`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textLowEmphasis};
 `;
 
-export const Subtitle = styled.span`
-  ${p => p.theme.textStyle.uiXS};
-  color: ${p => p.theme.color.textLowEmphasis};
+const Asterisk = styled.span`
+  color: ${(p) => p.theme.color.error};
 `;
+
+export { Wrapper, Title, Component, ItemRow, Subtitle, Asterisk };

package/src/components/Fields/DateField/index.tsx

@@ -32,8 +32,9 @@ const DateField = (props: IDateFieldProps): JSX.Element => {
 
   const currentDate = new Date();
   const defaultValue = mandatory ? dateToString(currentDate) : null;
+  const stringDate = value && typeof value === "number" ? dateToString(new Date(value * 1000)) : value;
 
-  const dateValue = value && (isValidDate(value) || isValidDateRange(value)) ? value : defaultValue;
+  const dateValue = stringDate && (isValidDate(stringDate) || isValidDateRange(stringDate)) ? stringDate : defaultValue;
 
   const isRange = dateValue && dateValue.split(" - ").length > 1;
   const { isOpen, toggleModal } = useModal();
@@ -46,7 +47,7 @@ const DateField = (props: IDateFieldProps): JSX.Element => {
           end: dateValue ? stringToDate(dateValue) : null,
         };
 
-  const dateFormat = "yyyy/MM/dd";
+  const dateFormat = "dd/MM/yyyy";
 
   const minDate = futureDate ? initialDate.start : null;
   const maxDate = pastDate ? initialDate.start : null;

package/src/components/Fields/ReferenceField/AutoPanel/AutoItem/index.tsx

@@ -52,7 +52,7 @@ const AutoItem = (props: IProps) => {
   const ActionMenu = (props: any) => {
     const { source } = props;
     return (
-      <FloatingMenu Button={MoreInfoButton} isWide={false}>
+      <FloatingMenu Button={MoreInfoButton}>
         <S.ActionMenu>{editMenu.options.map((item: any, i: number) => actionMenuItem(item, source))}</S.ActionMenu>
       </FloatingMenu>
     );

package/src/components/Fields/ReferenceField/AutoPanel/index.tsx

@@ -134,7 +134,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
 
   const addSource =
     state.sourceTitles.length > 1 ? (
-      <FloatingMenu Button={addSourceButton} isWide={false}>
+      <FloatingMenu Button={addSourceButton}>
         {sourceMenu(state.sourceTitles)}
       </FloatingMenu>
     ) : null;

package/src/components/Fields/ReferenceField/ItemList/Item/index.tsx

@@ -47,7 +47,7 @@ const Item = (props: IProps) => {
   };
 
   const ActionMenu = () => (
-    <FloatingMenu Button={MoreInfoButton} isWide={false}>
+    <FloatingMenu Button={MoreInfoButton}>
       <S.ActionMenu>{editMenu.options.map((item: any, i: number) => actionMenuItem(item))}</S.ActionMenu>
     </FloatingMenu>
   );

package/src/components/Fields/UrlField/index.tsx

@@ -25,6 +25,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
       if (isReqOk(response.status)) {
         const { data } = response;
         setInternalPageName(data.title);
+        if (!value?.title) handleTitleChange(data.title);
 
         const anchors: ISelectOption[] = findAnchorsFromPage(data);
         setAnchorOptions(anchors);
@@ -58,13 +59,15 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 
   const handleSetPage = (page: IPage) => {
     toggleModal();
-    onChange({ ...value, href: null, linkTo: page.id });
+    onChange({ ...value, href: null, linkTo: page.id, linkToURL: page.fullUrl });
     handleValidation && handleValidation(page.id.toString(), validators);
     handlePanel && handlePanel(isOpen);
   };
 
   const handleChange = (newValue: string) => onChange({ ...value, href: newValue });
 
+  const handleTitleChange = (newValue: string) => onChange({ ...value, title: newValue });
+
   const handleNewTabChange = (newValue: boolean) => onChange({ ...value, newTab: newValue });
 
   const handleNoFollowChange = (newValue: boolean) => onChange({ ...value, noFollow: newValue });
@@ -98,6 +101,13 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
   }
 
   const advancedFields = [
+    {
+      type: "TextField" as Field,
+      name: "title",
+      title: "Title",
+      value: value ? value.title : "",
+      onChange: handleTitleChange,
+    },
     {
       type: "UniqueCheck" as Field,
       name: "newTab",
@@ -139,6 +149,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
                   key={adField.name}
                   options={adField.options}
                   name={adField.name}
+                  title={adField.title}
                   fieldType={adField.type}
                   value={adField.value}
                   onChange={adField.onChange}

package/src/components/Fields/Wysiwyg/config.tsx

@@ -1,60 +1,84 @@
 const buttonsFull = {
-    moreText: {
-      buttons: ["bold", "italic", "paragraphFormat", "formatUL", "quote", "alignCenter"],
-      buttonsVisible: 6,
-    },
-    moreText2: {
-      buttons: ["insertLink", "insertImage", "insertVideo", "clearFormatting", "fullscreen"],
-      buttonsVisible: 5,
-    },
-    moreMisc: {
-      buttons: [
-        "underline",
-        "textColor",
-        "formatOLSimple",
-        "specialCharacters",
-        "insertHR",
-        "alignLeft",
-        "alignRight",
-        "alignJustify",
-        "outdent",
-        "indent",
-        "undo",
-        "redo",
-        "selectAll",
-        "html",
-      ],
-      align: "right",
-      buttonsVisible: 0,
-    },
-  };
+  moreText: {
+    buttons: ["bold", "italic", "paragraphFormat", "formatUL", "quote", "alignCenter"],
+    buttonsVisible: 6,
+  },
+  moreText2: {
+    buttons: ["insertLink", "insertImage", "insertVideo", "clearFormatting", "fullscreen"],
+    buttonsVisible: 5,
+  },
+  moreMisc: {
+    buttons: [
+      "underline",
+      "textColor",
+      "formatOLSimple",
+      "specialCharacters",
+      "insertHR",
+      "alignLeft",
+      "alignRight",
+      "alignJustify",
+      "outdent",
+      "indent",
+      "undo",
+      "redo",
+      "selectAll",
+      "html",
+    ],
+    align: "right",
+    buttonsVisible: 0,
+  },
+};
 
-  const buttons = [["bold", "italic", "paragraphFormat", "formatUL", "quote", "alignLeft", "alignCenter", "insertLink", "|", "fullscreen"]];
+const buttons = [
+  [
+    "bold",
+    "italic",
+    "paragraphFormat",
+    "formatUL",
+    "quote",
+    "alignLeft",
+    "alignCenter",
+    "insertLink",
+    "|",
+    "fullscreen",
+  ],
+];
 
-  const wysiwygConfig = {
-    key: process.env.REACT_APP_FROALA_KEY,
-    // pastePlain: false,
-    pasteDeniedAttrs: ["class", "id", "style", "dir"],
-    listAdvancedTypes: false,
-    attribution: false,
-    paragraphFormat: {
-      N: "Normal",
-      H1: "Heading 1",
-      H2: "Heading 2",
-      H3: "Heading 3",
-      H4: "Heading 4",
-    },
-    imageEditButtons: ["imageReplace", "imageAlign", "imageCaption", "imageRemove", "|", "imageLink", "linkOpen", "linkEdit", "linkRemove", "-", "imageDisplay", "imageAlt"],
-    imageResize: false,
-    linkEditButtons: ["linkOpen", "linkEdit", "linkRemove"],
-    videoInsertButtons: ["videoBack", "|", "videoByURL", "videoEmbed"],
-    imageUpload: true,
-    imageAllowedTypes: ["jpeg", "jpg", "png", "svg"],
-    imageMaxSize: 20 * 1024 * 1024,
-    imageUploadMethod: "POST",
-    imageUploadURL: `${process.env.REACT_APP_API_ENDPOINT}/images/wysiwyg`,
-    imageManagerLoadURL: `${process.env.REACT_APP_API_ENDPOINT}/images/wysiwyg`,
-    requestWithCORS: false,
-  };
+const wysiwygConfig = {
+  key: process.env.REACT_APP_FROALA_KEY,
+  // pastePlain: false,
+  pasteDeniedAttrs: ["class", "id", "style", "dir"],
+  listAdvancedTypes: false,
+  attribution: false,
+  paragraphFormat: {
+    N: "Normal",
+    H1: "Heading 1",
+    H2: "Heading 2",
+    H3: "Heading 3",
+    H4: "Heading 4",
+  },
+  imageEditButtons: [
+    "imageReplace",
+    "imageAlign",
+    "imageCaption",
+    "imageRemove",
+    "|",
+    "imageLink",
+    "linkOpen",
+    "linkEdit",
+    "linkRemove",
+    "-",
+    "imageDisplay",
+    "imageAlt",
+  ],
+  imageResize: false,
+  linkEditButtons: ["linkOpen", "linkEdit", "linkRemove"],
+  videoInsertButtons: ["videoBack", "|", "videoByURL", "videoEmbed"],
+  imageUpload: true,
+  imageAllowedTypes: ["jpeg", "jpg", "png", "svg"],
+  imageMaxSize: 20 * 1024 * 1024,
+  imageManagerLoadURL: `${process.env.REACT_APP_API_ENDPOINT}/images/wysiwyg`,
+  requestWithCORS: false,
+};
 
-  export { buttonsFull, buttons, wysiwygConfig }
+export { buttonsFull, buttons, wysiwygConfig };

package/src/components/Fields/Wysiwyg/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import FroalaEditor from "react-froala-wysiwyg";
 import { decodeEntities } from "@ax/helpers";
-import { IImage, ISite } from "@ax/types";
+import { IImage, ISite, IRootState } from "@ax/types";
 import { galleryActions } from "@ax/containers/Gallery";
 
 import { wysiwygConfig, buttons, buttonsFull } from "./config";
@@ -10,9 +10,20 @@ import "./vendors";
 import * as S from "./style";
 
 const Wysiwyg = (props: IProps): JSX.Element => {
-  const { value, error, onChange, placeholder, full = true, disabled, handleValidation, site, uploadImage } = props;
+  const {
+    value,
+    error,
+    onChange,
+    placeholder,
+    full = true,
+    disabled,
+    handleValidation,
+    site,
+    token,
+    uploadImage,
+  } = props;
 
-  const imageSite = site ? site.id : "global"
+  const imageSite = site ? site.id : "global";
 
   const handleChange = (model: string) => {
     onChange(model);
@@ -23,6 +34,9 @@ const Wysiwyg = (props: IProps): JSX.Element => {
   const dynamicConfig = {
     placeholderText: placeholder,
     toolbarButtons: full ? buttonsFull : buttons,
+    requestHeaders: {
+      Authorization: `bearer ${token}`,
+    },
     events: {
       initialized() {
         const editor: any = this;
@@ -34,9 +48,8 @@ const Wysiwyg = (props: IProps): JSX.Element => {
       },
       "image.beforeUpload": async function (images: FileList) {
         const editor: any = this;
-        const editorImage = editor.image.get();
         const { url } = await uploadImage(images[0], imageSite);
-        editor.image.insert(url, null, null, editorImage);
+        editor.image.insert(url, true, null, editor.image.get(), null);
         return false;
       },
       blur: function () {
@@ -72,6 +85,10 @@ interface IWysiwygProps {
   site: ISite;
 }
 
+const mapStateToProps = (state: IRootState) => ({
+  token: state.app.token,
+});
+
 interface IDispatchProps {
   uploadImage: (imageFile: File, site: number | string) => Promise<IImage>;
 }
@@ -82,4 +99,4 @@ const mapDispatchToProps = {
 
 type IProps = IWysiwygProps & IDispatchProps;
 
-export default connect(null, mapDispatchToProps)(Wysiwyg);
+export default connect(mapStateToProps, mapDispatchToProps)(Wysiwyg);

package/src/components/FloatingMenu/index.tsx

@@ -7,7 +7,6 @@ import * as S from "./style";
 const FloatingMenu = (props: IProps) => {
   const {
     children,
-    isWide,
     isInAppBar,
     Button,
     position = "right",
@@ -51,17 +50,22 @@ const FloatingMenu = (props: IProps) => {
   const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) =>
     reactiveToHover && !isOpen ? handleClick(e) : null;
 
+  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) =>
+    reactiveToHover && isOpen && setOpen(false);
+
   useHandleClickOutside(isOpen, handleClickOutside);
 
   return (
-    <S.Wrapper ref={wrapper} onClick={handleClick} onMouseEnter={handleMouseEnter}>
+    <S.Wrapper ref={wrapper} onClick={handleClick} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
       <S.ButtonWrapper ref={button}>
         <Button />
       </S.ButtonWrapper>
       {isOpen && (
-        <S.Menu isWide={isWide} isInAppBar={isInAppBar} position={position} ref={menuOptions}>
-          {children}
-        </S.Menu>
+        <S.MenuWrapper isInAppBar={isInAppBar} ref={menuOptions} position={position}>
+          <S.Menu>
+            {children}
+          </S.Menu>
+        </S.MenuWrapper>
       )}
     </S.Wrapper>
   );
@@ -70,7 +74,6 @@ const FloatingMenu = (props: IProps) => {
 interface IProps {
   children: any;
   Button: any;
-  isWide: boolean;
   isInAppBar?: boolean;
   position?: string;
   closeOnSelect?: boolean;

package/src/components/FloatingMenu/style.tsx

@@ -7,17 +7,19 @@ export const ButtonWrapper = styled.div`
   align-items: center;
 `;
 
-export const Menu = styled.div<{ isWide: boolean; isInAppBar?: boolean; position: string }>`
+export const MenuWrapper = styled.div<{ isInAppBar?: boolean, position: string }>`
   position: absolute;
+  z-index: 3;
+  padding-top: ${(p) => (p.isInAppBar ? p.theme.spacing.s : p.theme.spacing.xs)};
+  margin-right: ${(p) => (p.isInAppBar ? p.theme.spacing.s : "0")};
   ${(p) => p.position}: 0;
+`;
+
+export const Menu = styled.div`
   padding: ${(p) => p.theme.spacing.xs} 0;
   max-width: ${(p) => `calc(${p.theme.spacing.l} * 5)`};
-  min-width: ${(p) => `calc(${p.theme.spacing.l} * 3)`};
-  z-index: 3;
+  min-width: ${(p) => `calc(${p.theme.spacing.m} * 7)`};
   background: ${(p) => p.theme.color.uiBackground02};
   box-shadow: ${(p) => p.theme.shadow.shadowL};
   border-radius: ${(p) => p.theme.spacing.xxs};
-  margin-right: ${(p) => (p.isInAppBar ? p.theme.spacing.s : "0")};
-  margin-top: ${(p) => (p.isInAppBar ? p.theme.spacing.s : p.theme.spacing.xs)};
-  white-space: nowrap;
 `;

package/src/components/Gallery/GalleryFilters/Orientation/index.tsx

@@ -34,7 +34,7 @@ const Orientation = ({ filterItems }: IOrientationProps): JSX.Element => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Header} position="center" closeOnSelect={true}>
+    <FloatingMenu Button={Header} position="center" closeOnSelect={true}>
       <ListTitle>Filter by orientation</ListTitle>
       <ListItem isSelected={selectedValue.includes("all")} onClick={() => setQuery("all")}>All</ListItem>
       <ListItem isSelected={selectedValue.includes("landscape")} onClick={() => setQuery("landscape")}>Horizontal</ListItem>

package/src/components/Gallery/GalleryFilters/SortBy/index.tsx

@@ -31,7 +31,7 @@ const SortBy = ({ sortItems, sortedState }: ISortByProps): JSX.Element => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Header} position="center">
+    <FloatingMenu Button={Header} position="center">
       <ListTitle>Name Sorting</ListTitle>
       <ListItem isSelected={sortedByName && isAscending} onClick={sortAscendingName}>Ascendent</ListItem>
       <ListItem isSelected={sortedByName && !isAscending} onClick={sortDescendingName}>Descendent</ListItem>