Skip to content

Make action card items slightly smaller #3184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Crabcyborg merged 2 commits into from
Jul 13, 2026
Merged

Make action card items slightly smaller #3184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7aaa297
Make action card items slightly smaller
Crabcyborg Jul 13, 2026
d4f3c77
Reduce the icon container padding
Crabcyborg Jul 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion classes/views/frm-form-actions/_action_icon.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
</span>

<div class="frm-flex-col frm-min-w-0">
<h3 class="frm-h-stack-xs frm-text-md frm-capitalize">
<h3 class="frm-h-stack-xs frm-capitalize">
<?php
if ( isset( $data['data-upgrade'] ) && ! isset( $data['data-oneclick'] ) ) {
FrmAppHelper::icon_by_class( 'frmfont frm_lock_icon frm_svg15', array( 'aria-label' => __( 'Lock icon', 'formidable' ) ) );
Expand Down
2 changes: 1 addition & 1 deletion css/frm_admin.css
View file
Open in desktop

Large diffs are not rendered by default.

21 changes: 19 additions & 2 deletions resources/scss/admin/components/form/_form-actions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,6 @@

// Action Cards
.frm_actions_list .frm-card-item.frm-card-item--outlined {
padding-left: var(--gap-sm);
padding-right: var(--gap-sm);
margin: 0;
transition: box-shadow 200ms ease-in-out, background-color 200ms ease-out;

Expand Down Expand Up @@ -96,6 +94,25 @@
}
}

.frm-action.frm-card-item {
padding: 12px !important;
}

.frm-action.frm-card-item h3 + p {
font-size: 13px;
}
Comment on lines +97 to +103

@coderabbitai coderabbitai Bot Jul 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Apply the 14px action-title rule consistently across source, generated CSS, and card templates.

The action-card h3 has no scoped 14px declaration, while the not-installed template still applies frm-text-md at 16px with !important.

  • resources/scss/admin/components/form/_form-actions.scss#L97-L103: add font-size: var(--text-sm) to the action-card h3.
  • css/frm_admin.css#L1: regenerate the compiled stylesheet with that rule.
  • classes/views/frm-form-actions/_action_icon.php#L39-L39: keep the installed template without frm-text-md, and remove the same class from the not-installed heading in classes/views/frm-form-actions/settings.php.
📍 Affects 3 files
  • resources/scss/admin/components/form/_form-actions.scss#L97-L103 (this comment)
  • css/frm_admin.css#L1-L1
  • classes/views/frm-form-actions/_action_icon.php#L39-L39
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@resources/scss/admin/components/form/_form-actions.scss` around lines 97 -
103, Apply the 14px action-title styling consistently: update the
.frm-action.frm-card-item h3 rule in
resources/scss/admin/components/form/_form-actions.scss (lines 97-103) with
var(--text-sm), regenerate css/frm_admin.css (line 1), preserve the installed
heading without frm-text-md in classes/views/frm-form-actions/_action_icon.php
(line 39), and remove frm-text-md from the not-installed heading in
classes/views/frm-form-actions/settings.php (line not specified).


.frm-action .frm-border-icon {
box-sizing: border-box;
width: 36px;
height: 36px;
}

// The minmax usually uses 303px. Allow action card items to be a bit smaller.
.frm-list-grid-layout.frm_actions_list {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

// Action Widgets/Settings
.frm_posttax_opt_list {
border: 1px solid var(--grey-300);
Expand Down
Loading