Modal Styles: Fix styles in SuggestMessageModal, GiftInfoModal and StarsBalanceModal (#6093)

CLAUDE.md

@@ -42,6 +42,15 @@ You are an expert in TypeScript, JavaScript, HTML, SCSS and Teact with deep expe
     // ✅ GOOD - Full type checking
     { field: condition ? value : undefined }
     ```
+  - **IMPORTANT: Use string templates for inline styles** - Always use template literals for style prop:
+    ```typescript
+    // ✅ CORRECT
+    style={`transform: translateX(${value}%)`}
+    
+    // ❌ WRONG
+    style={{ transform: `translateX(${value}%)` }}
+    style={{ '--custom-prop': value } as React.CSSProperties}
+    ```
 
 - **Localization & Text Rules:**
   - **ALWAYS** use `lang()` for all text content - never hardcode strings.

src/components/modals/gift/info/GiftInfoModal.module.scss

@@ -45,12 +45,12 @@
   color: white;
 
   background-color: rgba(0, 0, 0, 0.2);
-  backdrop-filter: blur(25px);
   outline: none !important;
 }
 
 .giftResalePriceContainer {
   font-size: 0.75rem;
+  backdrop-filter: blur(25px);
 }
 
 .starAmountIcon,

src/components/modals/stars/StarsBalanceModal.module.scss

@@ -10,7 +10,7 @@
 
 .root :global(.modal-dialog) {
   max-width: 26.25rem;
-  height: min(45rem, 90vh);
+  height: min(var(--modal-height, 45rem), 90vh);
 }
 
 .minimal :global(.modal-dialog) {
@@ -33,6 +33,11 @@
   flex-direction: column-reverse;
 }
 
+.section {
+  @include mixins.side-panel-section;
+}
+
+.lastSection,
 .section {
   position: relative;
 
@@ -43,7 +48,6 @@
   padding: 0.5rem;
 
   @include mixins.adapt-padding-to-scrollbar(0.5rem);
-  @include mixins.side-panel-section;
 }
 
 .sectionTitle {

src/components/modals/stars/StarsBalanceModal.tsx

@@ -133,6 +133,20 @@ const StarsBalanceModal = ({
   const shouldShowItems = Boolean(history?.all?.transactions.length && !shouldOpenOnBuy);
   const shouldSuggestGifting = !shouldOpenOnBuy;
 
+  const modalHeight = useMemo(() => {
+    const transactionCount = history?.all?.transactions.length || 0;
+    if (transactionCount == 1) {
+      return '35.5rem';
+    }
+    if (transactionCount == 2) {
+      return '39.25rem';
+    }
+    if (transactionCount == 3) {
+      return '43rem';
+    }
+    return '45rem';
+  }, [history?.all?.transactions.length]);
+
   const transactionTabs: TabWithProperties[] = useMemo(() => {
     return TRANSACTION_TABS_KEYS.map((key) => ({
       title: lang(key),
@@ -168,7 +182,7 @@ const StarsBalanceModal = ({
     ];
   }, [isOpen, oldLang]);
 
-  const renderStarsSection = () => {
+  const renderStarsHeaderSection = () => {
     return (
       <>
         <ParticlesHeader
@@ -210,7 +224,7 @@ const StarsBalanceModal = ({
     );
   };
 
-  const renderTonSection = () => {
+  const renderTonHeaderSection = () => {
     const tonAmount = convertCurrencyFromBaseUnit(balance?.amount || 0, TON_CURRENCY_CODE);
     return (
       <>
@@ -285,6 +299,7 @@ const StarsBalanceModal = ({
       className={buildClassName(styles.root, !shouldForceHeight && !areBuyOptionsShown && styles.minimal)}
       isOpen={isOpen}
       onClose={closeStarsBalanceModal}
+      dialogStyle={`--modal-height: ${modalHeight}`}
     >
       <div className={buildClassName(styles.main, 'custom-scroll')} onScroll={handleScroll}>
         <Button
@@ -305,7 +320,7 @@ const StarsBalanceModal = ({
           </h2>
         </div>
         <div className={styles.section}>
-          {currency === TON_CURRENCY_CODE ? renderTonSection() : renderStarsSection()}
+          {currency === TON_CURRENCY_CODE ? renderTonHeaderSection() : renderStarsHeaderSection()}
         </div>
         {areBuyOptionsShown && (
           <div className={styles.tos}>
@@ -345,7 +360,7 @@ const StarsBalanceModal = ({
         )}
         {shouldShowItems && (
           <div className={styles.container}>
-            <div className={styles.section}>
+            <div className={styles.lastSection}>
               <Transition
                 name={lang.isRtl ? 'slideOptimizedRtl' : 'slideOptimized'}
                 activeKey={selectedTabIndex}

src/components/modals/suggestMessage/SuggestMessageModal.module.scss

@@ -1,11 +1,15 @@
 .content {
   display: flex;
   flex-direction: column;
+
   max-height: min(92vh, 32rem) !important;
+  padding-bottom: 1.125rem !important;
+  padding-inline: 1.125rem !important;
 }
 
 .modalHeader {
   padding-top: 0.25rem !important;
+  padding-inline: 0.25rem !important;
 }
 
 .section,
@@ -26,7 +30,7 @@
 }
 
 .input {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.5rem !important;
 }
 
 .description {

src/components/modals/suggestMessage/SuggestMessageModal.tsx

@@ -242,7 +242,7 @@ const SuggestMessageModal = ({
         </div>
 
         <div className={styles.section}>
-          <div className={buildClassName('input-group', 'touched')}>
+          <div className={buildClassName(styles.input, 'input-group', 'touched')}>
             <input
               type="text"
               className={buildClassName('form-control', isCalendarOpened && 'focus')}