Buttons side-by-side in Main Section of a panel

Fibery Showcase
1

Here a nice UX improvement for buttons that are placed in the main section of a panel (not as pinned field).

I did not find ‘side-effects’ yet. If you encounter some, let me know.

Before:

image
image825×364 13.4 KB

After applying CSS tweak:

image
image779×191 9.32 KB

Tweak CSS


/* --- 1. Constrain and center the ENTIRE main section --- */
/* This rule should target the OUTSIDE draggable_list (e.g., the one with data-rbd-droppable-id="/main-section") */
/* This is the rule you found that successfully sets the overall width. */
.draggable_list {
    margin: 0 auto;
    width: min(1024px, 100%);
}

/* --- 2. Make the INNER container a Flexbox (for buttons and views block) --- */
/* This targets the draggable_list specific to your buttons (identified by l1w6udfz). */
/* This is the flex container for the actual buttons and the views wrapper. */
.l1w6udfz.draggable_list {
    display: flex !important;    /* Turn this into a flex container */
    flex-direction: row;         /* Arrange items horizontally */
    flex-wrap: wrap;             /* Allow items to wrap to the next line if space runs out */
    align-items: flex-start;     /* Align items to the top of the container */
    gap: 12px;                   /* Add space between flex items (buttons/views block) */
    justify-content: flex-start !important; /* Ensures buttons stick to the left */
    width: 100% !important;      /* <--- NEW: Force the flex container to take full width of its parent */
}

/* --- 3. Style the individual button blocks (flex items) --- */
/* This rule targets only the specific button elements by checking for the 'view_panel_item_name' child,
   OR the 'user_button' child. */
.l1w6udfz.draggable_list > .m7s8g0a.main_column_block:has(.c1q69m9n.view_panel_item_name),
.l1w6udfz.draggable_list > .m7s8g0a.main_column_block:has(.user_button) {
    margin: 0 !important; /* Removes any spreading margins on individual button containers */
    min-width: auto !important;
    width: auto !important;
    flex-basis: auto !important;
    flex-grow: 0;
    flex-shrink: 0;
}

/* --- 4. Force the larger "relation_views_wrapper" block to a new line --- */
/* This ensures the specific block containing the relation_views_wrapper takes full width. */
/* This rule correctly uses :has(.r17hpnii.relation_views_wrapper) to target only the views block. */
.l1w6udfz.draggable_list > .m7s8g0a.main_column_block:has(.r17hpnii.relation_views_wrapper) {
    flex-basis: 100% !important;
    flex-grow: 1 !important;
}

/* --- 5. HIDE THE DRAGGABLE HANDLE AND THREE DOTS MENU (USING YOUR SOLUTION) --- */
/* This rule will hide the entire 'object_editor_one_line_unit_layout' when it also has the 'actions-hidden' class. */
/* This is the cleanest way to control their visibility, as provided by Fibery. */
.actions-hidden.object_editor_one_line_unit_layout {
    display: none;
}

What the CSS does

  1. Main Section: Centers page content and limits its overall width.
  2. Inner Container (Buttons/Blocks):
    • Becomes a horizontal flexbox, allowing items to wrap.
    • Adds 12px spacing between items.
    • Crucially, forces itself to fill 100% of its parent’s width.
  3. Buttons (Flex Items):
    • Specifically targets your custom user buttons.
    • Removes their margins.
    • Prevents them from growing or shrinking, letting content define their size.
  4. Relation Views Block: Forces this specific block to take full width, making it appear on a new line.
  5. Hides Fibery UI elements: Conceals draggable handles and three-dots menus when actions-hidden class is present.
3 Likes