@licklist/design 0.78.5-dev.60 → 0.78.5-dev.63

package/dist/v2/pages/auth/CreatePassword/CreatePasswordPage.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './CreatePasswordPage.scss';
+export interface CreatePasswordPageProps {
+    onSubmit: (password: string) => Promise<void> | void;
+    onResetInstead?: () => void;
+    isLoading?: boolean;
+    error?: string;
+}
+export declare const CreatePasswordPage: React.FC<CreatePasswordPageProps>;
+//# sourceMappingURL=CreatePasswordPage.d.ts.map

package/dist/v2/pages/auth/CreatePassword/CreatePasswordPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreatePasswordPage.d.ts","sourceRoot":"","sources":["../../../../../src/v2/pages/auth/CreatePassword/CreatePasswordPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,2BAA2B,CAAA;AAOlC,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACpD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+JhE,CAAA"}

package/dist/v2/pages/auth/CreatePassword/index.d.ts

@@ -0,0 +1,3 @@
+export { CreatePasswordPage } from './CreatePasswordPage';
+export type { CreatePasswordPageProps } from './CreatePasswordPage';
+//# sourceMappingURL=index.d.ts.map

package/dist/v2/pages/auth/CreatePassword/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/v2/pages/auth/CreatePassword/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/v2/pages/auth/Login/LoginPage.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './LoginPage.scss';
+export interface LoginPageProps {
+    onSubmit: (email: string, password: string) => Promise<void> | void;
+    onForgotPassword?: () => void;
+    isLoading?: boolean;
+    error?: string;
+    version?: string;
+}
+export declare const LoginPage: React.FC<LoginPageProps>;
+//# sourceMappingURL=LoginPage.d.ts.map

package/dist/v2/pages/auth/Login/LoginPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginPage.d.ts","sourceRoot":"","sources":["../../../../../src/v2/pages/auth/Login/LoginPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,kBAAkB,CAAA;AAOzB,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACnE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4E9C,CAAA"}

package/dist/v2/pages/auth/Login/index.d.ts

@@ -0,0 +1,3 @@
+export { LoginPage } from './LoginPage';
+export type { LoginPageProps } from './LoginPage';
+//# sourceMappingURL=index.d.ts.map

package/dist/v2/pages/auth/Login/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/v2/pages/auth/Login/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA"}

package/dist/v2/pages/auth/ResetPassword/ResetPasswordPage.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './ResetPasswordPage.scss';
+export interface ResetPasswordPageProps {
+    onSubmit: (email: string) => Promise<void> | void;
+    onBackToLogin?: () => void;
+    isLoading?: boolean;
+    error?: string;
+    successMessage?: string;
+    version?: string;
+}
+export declare const ResetPasswordPage: React.FC<ResetPasswordPageProps>;
+//# sourceMappingURL=ResetPasswordPage.d.ts.map

package/dist/v2/pages/auth/ResetPassword/ResetPasswordPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResetPasswordPage.d.ts","sourceRoot":"","sources":["../../../../../src/v2/pages/auth/ResetPassword/ResetPasswordPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,0BAA0B,CAAA;AAMjC,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACjD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsF9D,CAAA"}

package/dist/v2/pages/auth/ResetPassword/index.d.ts

@@ -0,0 +1,3 @@
+export { ResetPasswordPage } from './ResetPasswordPage';
+export type { ResetPasswordPageProps } from './ResetPasswordPage';
+//# sourceMappingURL=index.d.ts.map

package/dist/v2/pages/auth/ResetPassword/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/v2/pages/auth/ResetPassword/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/v2/pages/auth/VerifyEmail/VerifyEmailPage.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './VerifyEmailPage.scss';
+export interface VerifyEmailPageProps {
+    onSubmit: (code: string) => Promise<void> | void;
+    isLoading?: boolean;
+    error?: string;
+}
+export declare const VerifyEmailPage: React.FC<VerifyEmailPageProps>;
+//# sourceMappingURL=VerifyEmailPage.d.ts.map

package/dist/v2/pages/auth/VerifyEmail/VerifyEmailPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerifyEmailPage.d.ts","sourceRoot":"","sources":["../../../../../src/v2/pages/auth/VerifyEmail/VerifyEmailPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAK/C,OAAO,wBAAwB,CAAA;AAI/B,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAChD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA8F1D,CAAA"}

package/dist/v2/pages/auth/VerifyEmail/index.d.ts

@@ -0,0 +1,3 @@
+export { VerifyEmailPage } from './VerifyEmailPage';
+export type { VerifyEmailPageProps } from './VerifyEmailPage';
+//# sourceMappingURL=index.d.ts.map

package/dist/v2/pages/auth/VerifyEmail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/v2/pages/auth/VerifyEmail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/v2/pages/auth/index.d.ts

@@ -0,0 +1,11 @@
+export { AuthLayout } from './AuthLayout';
+export type { AuthLayoutProps } from './AuthLayout';
+export { LoginPage } from './Login';
+export type { LoginPageProps } from './Login';
+export { ResetPasswordPage } from './ResetPassword';
+export type { ResetPasswordPageProps } from './ResetPassword';
+export { CreatePasswordPage } from './CreatePassword';
+export type { CreatePasswordPageProps } from './CreatePassword';
+export { VerifyEmailPage } from './VerifyEmail';
+export type { VerifyEmailPageProps } from './VerifyEmail';
+//# sourceMappingURL=index.d.ts.map

package/dist/v2/pages/auth/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/pages/auth/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACnD,YAAY,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAE7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACrD,YAAY,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.60",
+  "version": "0.78.5-dev.63",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.36.1-dev.14",
+    "@licklist/core": "0.36.1-dev.17-new",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.4-dev.13",
     "clsx": "2.1.1",

package/src/auth/Login/LoginPage.tsx

@@ -0,0 +1,52 @@
+import { useEffect } from 'react'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+import { useTranslation } from 'react-i18next'
+import useAlert from '@licklist/plugins/dist/context/app/hooks/useAlert'
+import FormCard from '../../static/FormCard'
+import Logo from '../../logo/Logo'
+import { ReactComponent as BookeditLogoSvg } from '../../assets/logo/bookedit.svg'
+import { LoginFormComponent } from './LoginFormComponent'
+
+export interface LoginPageProps {
+  onSubmit: (email: string, password: string) => void | Promise<void>
+  onForgotPassword?: () => void
+  isLoading?: boolean
+  error?: string
+}
+
+export const LoginPage = ({ onSubmit, isLoading = false, error }: LoginPageProps) => {
+  const { t } = useTranslation(['User'])
+  const { showAlert } = useAlert()
+
+  useEffect(() => {
+    if (error) {
+      showAlert({ type: 'error', message: error })
+    }
+  }, [error])
+
+  const handleSubmit = async (credentials: { email: string; password: string }) => {
+    await onSubmit(credentials.email, credentials.password)
+  }
+
+  return (
+    <Row className='justify-content-center'>
+      <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
+        <h1 className='text-center'>{t('User:loginTitle')}</h1>
+
+        <div className='login d-flex pb-4 justify-content-center'>
+          <Logo logo={<BookeditLogoSvg />} />
+        </div>
+
+        <FormCard>
+          <LoginFormComponent
+            isLoading={isLoading}
+            setIsLoading={() => {}}
+            onSubmit={handleSubmit}
+            invitation={null}
+          />
+        </FormCard>
+      </Col>
+    </Row>
+  )
+}

package/src/auth/Login/index.ts

@@ -1,2 +1,3 @@
 export * from './LoginComponent'
 export * from './LoginFormComponent'
+export * from './LoginPage'

package/src/v2/components/ActionMenu/ActionMenu.scss

@@ -7,46 +7,33 @@
 
   &__trigger {
     display: flex;
-    width: 40px;
-    height: 40px;
-    padding: 8px;
+    width: 32px;
+    height: 32px;
+    padding: 0;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
-    border: 1px solid var(--border-primary, #E8E9EF);
+    border: none;
     background: var(--surface-action-soft);
     color: var(--actions-regular, #5D5BF4);
     cursor: pointer;
     transition: all 0.2s ease;
+    position: relative;
 
     &:hover {
-      background: var(--surface-action-soft);
+      opacity: 0.8;
     }
 
     &--close {
       border-radius: 50%;
       background: #F4F4FE;
-      border: 1px solid #F4F4FE;
 
       &:hover {
         background: #E8E8FD;
+        opacity: 1;
       }
     }
 
-    svg {
-      width: 28px;
-      height: 28px;
-    }
-
-    .action-menu__circle {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 32px;
-      height: 32px;
-      z-index: -1;
-    }
   }
 
   &__dropdown {

package/src/v2/components/ActionMenu/ActionMenu.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useLayoutEffect } from 'react'
-import { CloseIcon, EllipsisIcon, CircleIcon } from '../../icons'
+import { CloseIcon, EllipsisIcon } from '../../icons'
 import './ActionMenu.scss'
 
 export interface ActionMenuItem {
@@ -83,10 +83,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({ items, className = '', i
         {isOpen ? (
           <CloseIcon width={18} height={18} />
         ) : (
-          <>
-            <CircleIcon width={32} height={32} className="action-menu__circle" fill="var(--surface-action-soft)" />
-            <EllipsisIcon width={18} height={18} fill="var(--fill-action)" />
-          </>
+          <EllipsisIcon width={18} height={4} fill="var(--fill-action)" />
         )}
       </button>
 

package/src/v2/components/FormField/FormField.scss

@@ -33,7 +33,7 @@
     padding: 8px 10px;
     height: 40px;
     font-family: var(--font-family-sans, 'Geist', sans-serif);
-    font-size: var(--text-regular-size, 15px);
+    font-size: var(--text-regular-size, 16px);
     line-height: var(--text-regular-line, 20px);
     color: var(--label-primary, #121e52);
     background-color: var(--surface-secondary, #f8f8fa);
@@ -60,6 +60,14 @@
       }
     }
 
+    &--success {
+      border-color: var(--border-status-success, #c9ecbd);
+
+      &:focus {
+        border-color: var(--border-status-success, #c9ecbd);
+      }
+    }
+
     &:disabled {
       background: var(--surface-status-disabled, #f8f8fa);
       color: var(--label-secondary, #626a90);

package/src/v2/components/FormField/FormField.tsx

@@ -4,30 +4,42 @@ import './FormField.scss'
 export interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: string
   error?: string
+  hasError?: boolean
+  success?: boolean
   helpText?: string
   required?: boolean
 }
 
 export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
-  ({ label, error, helpText, required, className = '', ...props }, ref) => (
-    <div className={`form-field ${className}`}>
-      {label && (
-        <label className="form-field__label">
-          {label}
-          {required && <span className="form-field__required">*</span>}
-        </label>
-      )}
-      <input
-        ref={ref}
-        className={`form-field__input ${error ? 'form-field__input--error' : ''}`}
-        {...props}
-      />
-      {helpText && !error && (
-        <span className="form-field__help-text">{helpText}</span>
-      )}
-      {error && <span className="form-field__error-text">{error}</span>}
-    </div>
-  )
+  ({ label, error, hasError, success, helpText, required, className = '', ...props }, ref) => {
+    const showError = error || hasError
+    const showSuccess = success && !showError
+    const inputClassName = [
+      'form-field__input',
+      showError ? 'form-field__input--error' : '',
+      showSuccess ? 'form-field__input--success' : '',
+    ].filter(Boolean).join(' ')
+
+    return (
+      <div className={`form-field ${className}`}>
+        {label && (
+          <label className="form-field__label">
+            {label}
+            {required && <span className="form-field__required">*</span>}
+          </label>
+        )}
+        <input
+          ref={ref}
+          className={inputClassName}
+          {...props}
+        />
+        {helpText && !showError && (
+          <span className="form-field__help-text">{helpText}</span>
+        )}
+        {error && <span className="form-field__error-text">{error}</span>}
+      </div>
+    )
+  }
 )
 
 FormField.displayName = 'FormField'

package/src/v2/components/NewPageHeader/NewPageHeader.scss

@@ -7,13 +7,9 @@
     padding: 32px 32px 0px 32px;
 
     @media (max-width: 768px) {
-        padding: 16px 16px 0px 16px;
+        padding: 16px 0 0 0;
         gap: 0;
     }
-
-    @media (max-width: 480px) {
-        padding: 16px 12px 0px 12px;
-    }
 }
 
 .new-page-header {

package/src/v2/components/ZoneCard/ResourceRow.tsx

@@ -1,57 +1,104 @@
 import React from 'react'
 import { ActionMenu, ActionMenuItem } from '../ActionMenu'
-import { GripVerticalIcon } from '../../icons'
+import { GripVerticalIcon, ArrowUpIcon, ArrowDownIcon } from '../../icons'
 import { DragHandleProps } from './ZoneContainer'
 import './ZoneCard.scss'
 
+export interface ResourceRowLabels {
+  quantity?: string
+  capacity?: string
+  total?: string
+}
+
 export interface ResourceRowProps {
   name: string
   quantity: number
   capacity: number
+  labels?: ResourceRowLabels
   menuItems?: ActionMenuItem[]
   draggable?: boolean
   dragHandleProps?: DragHandleProps
   onClick?: () => void
   className?: string
   style?: React.CSSProperties
+  isMobile?: boolean
+  isFirst?: boolean
+  isLast?: boolean
+  onMoveUp?: () => void
+  onMoveDown?: () => void
 }
 
 export const ResourceRow = React.forwardRef<HTMLDivElement, ResourceRowProps>(({
   name,
   quantity,
   capacity,
+  labels = {},
   menuItems = [],
   draggable = true,
   dragHandleProps,
   onClick,
   className = '',
   style,
+  isMobile = false,
+  isFirst = false,
+  isLast = false,
+  onMoveUp,
+  onMoveDown,
 }, ref) => {
+  const qtyLabel = labels.quantity ?? 'Qty'
+  const capLabel = labels.capacity ?? 'Cap'
+  const totalLabel = labels.total ?? 'Total'
   const classes = [
     'zone-card__resource',
     onClick ? 'zone-card__resource--clickable' : '',
+    isMobile ? 'zone-card__resource--mobile' : '',
     className,
   ].filter(Boolean).join(' ')
 
   return (
     <div ref={ref} className={classes} style={style} onClick={onClick}>
-      {draggable && (
+      {draggable && !isMobile && (
         <div
           className="zone-card__drag-handle zone-card__drag-handle--resource"
           {...dragHandleProps}
           onClick={(e) => e.stopPropagation()}
         >
-          {GripVerticalIcon({ width: 14, height: 14 })}
+          {GripVerticalIcon({ width: 16, height: 16 })}
+        </div>
+      )}
+      {draggable && isMobile && (
+        <div className="zone-card__reorder-arrows zone-card__reorder-arrows--resource" onClick={(e) => e.stopPropagation()}>
+          <button
+            className="zone-card__arrow-btn"
+            disabled={isFirst}
+            onClick={(e) => { e.stopPropagation(); onMoveUp?.() }}
+          >
+            <ArrowUpIcon />
+          </button>
+          <button
+            className="zone-card__arrow-btn"
+            disabled={isLast}
+            onClick={(e) => { e.stopPropagation(); onMoveDown?.() }}
+          >
+            <ArrowDownIcon />
+          </button>
         </div>
       )}
       <span className="zone-card__resource-name">{name}</span>
-      <div className="zone-card__resource-stats">
-        <span className="zone-card__resource-stat">Qty: {quantity}</span>
-        <span className="zone-card__resource-stat">Cap: {capacity}</span>
-        <span className="zone-card__resource-stat zone-card__resource-stat--total">
-          Total: {quantity * capacity}
+      {!isMobile && (
+        <div className="zone-card__resource-stats">
+          <span className="zone-card__resource-stat">{qtyLabel}: {quantity}</span>
+          <span className="zone-card__resource-stat">{capLabel}: {capacity}</span>
+          <span className="zone-card__resource-stat zone-card__resource-stat--total">
+            {totalLabel}: {quantity * capacity}
+          </span>
+        </div>
+      )}
+      {isMobile && (
+        <span className="zone-card__resource-stats-mobile">
+          {qtyLabel}: {quantity} &middot; {capLabel}: {capacity} &middot; {totalLabel}: {quantity * capacity}
         </span>
-      </div>
+      )}
       {menuItems.length > 0 && (
         <div className="zone-card__resource-actions" onClick={(e) => e.stopPropagation()}>
           <ActionMenu items={menuItems} />

package/src/v2/components/ZoneCard/ZoneCard.scss

@@ -7,7 +7,7 @@
   &__header {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 16px;
     padding: 12px 16px;
     background: var(--surface-secondary);
   }
@@ -15,14 +15,15 @@
   &__drag-handle {
     display: flex;
     align-items: center;
-    padding: 4px;
-    border-radius: 4px;
+    padding: 6px;
+    border-radius: 6px;
     cursor: grab;
-    color: var(--label-secondary);
+    color: var(--label-tertiary, var(--label-secondary));
     transition: all 0.2s ease;
+    flex-shrink: 0;
 
     &:hover {
-      color: var(--label-primary);
+      color: var(--label-secondary);
       background: var(--surface-primary);
     }
 
@@ -31,7 +32,44 @@
     }
 
     &--resource {
+      color: var(--label-tertiary, var(--label-secondary));
+    }
+  }
+
+  // Mobile reorder arrows (replaces drag handles)
+  &__reorder-arrows {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex-shrink: 0;
+
+    &--resource {
+      margin-right: 0;
+    }
+  }
+
+  &__arrow-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--label-tertiary, var(--label-secondary));
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 0;
+
+    &:hover:not(:disabled) {
       color: var(--label-secondary);
+      background: var(--surface-primary);
+    }
+
+    &:disabled {
+      opacity: 0.25;
+      pointer-events: none;
     }
   }
 
@@ -48,7 +86,7 @@
   &__header-right {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 16px;
     flex-shrink: 0;
   }
 
@@ -59,13 +97,15 @@
     line-height: 16px;
     color: var(--label-secondary);
     white-space: nowrap;
+    min-width: 72px;
+    text-align: right;
   }
 
   // Resource rows
   &__resource {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 16px;
     padding: 10px 16px 10px 32px;
     border-top: 1px solid var(--border-primary);
     transition: background 0.2s ease;
@@ -77,6 +117,11 @@
         background: var(--surface-secondary);
       }
     }
+
+    &--mobile {
+      flex-wrap: wrap;
+      padding-left: 16px;
+    }
   }
 
   &__resource-name {
@@ -103,14 +148,24 @@
     line-height: 16px;
     color: var(--label-secondary);
     white-space: nowrap;
-    min-width: 56px;
+    min-width: 72px;
 
     &--total {
-      min-width: 56px;
+      min-width: 72px;
       text-align: right;
     }
   }
 
+  // Mobile-only compact stats line
+  &__resource-stats-mobile {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    color: var(--label-secondary);
+    white-space: nowrap;
+  }
+
   &__resource-actions {
     flex-shrink: 0;
     width: 32px;
@@ -127,8 +182,13 @@
 
 @media (max-width: 768px) {
   .zone-card {
+    &__header {
+      padding: 10px 12px;
+    }
+
     &__resource {
-      padding-left: 16px;
+      padding: 10px 12px 10px 12px;
+      gap: 12px;
     }
 
     &__resource-stats {
@@ -138,5 +198,9 @@
     &__resource-stat {
       min-width: auto;
     }
+
+    &__add-resource-wrapper {
+      padding: 10px 12px;
+    }
   }
 }