webapp/src/components/rhs/all_badges.scss

@@ -60,24 +60,6 @@
     &__tabs {
         display: flex;
         gap: 0;
-        flex-shrink: 1;
-        min-width: 0;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-        padding-bottom: 2px;
-
-        &::-webkit-scrollbar {
-            height: 3px;
-        }
-
-        &::-webkit-scrollbar-track {
-            background: transparent;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background: rgba(var(--center-channel-color-rgb, 61, 60, 64), 0.2);
-            border-radius: 3px;
-        }
     }
 
     &__tab {
@@ -122,21 +104,39 @@
         color: var(--center-channel-color, #3d3c40);
     }
 
-    &__createButton {
+    &__content {
+        position: relative;
+        display: flex;
+        flex-flow: column;
+        flex: 1;
+        min-height: 0;
+
+        > .badge-tooltip-wrapper {
+            position: absolute;
+            bottom: 12px;
+            right: 14px;
+            z-index: 10;
+        }
+    }
+
+    &__fab {
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
         background: var(--button-bg, #166de0);
         color: var(--button-color, #fff);
         border: none;
-        border-radius: 4px;
+        font-size: 16px;
-        padding: 4px 10px;
+        line-height: 1;
-        font-size: 12px;
+        display: flex;
-        font-weight: 600;
+        align-items: center;
+        justify-content: center;
         cursor: pointer;
-        white-space: nowrap;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-        flex-shrink: 0;
+        transition: transform 0.15s, box-shadow 0.15s;
-        margin-bottom: 7px;
 
         &:hover {
-            opacity: 0.88;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
         }
     }
 }

webapp/src/components/rhs/index.tsx

@@ -22,6 +22,8 @@ import {openCreateBadgeModal, openCreateTypeModal, openEditBadgeModal, setRHSBad
 import {BadgeDetails, BadgeID} from 'types/badges';
 import Client from '../../client/api';
 
+import TooltipWrapper from '../user_popover/tooltip_wrapper';
+
 import UserBadges from './user_badges';
 import BadgeDetailsComponent from './badge_details';
 import AllBadges from './all_badges';
@@ -101,32 +103,52 @@ const RHS: React.FC = () => {
                         </button>
                     )}
                 </div>
-                {currentView === RHS_STATE_ALL && canCreateBadge && (
-                    <button
-                        className='AllBadges__createButton'
-                        onClick={handleCreateBadge}
-                    >
-                        <FormattedMessage
-                            id='badges.rhs.create_badge'
-                            defaultMessage='+ Создать достижение'
-                        />
-                    </button>
-                )}
-                {currentView === RHS_STATE_TYPES && canCreateType && (
-                    <button
-                        className='AllBadges__createButton'
-                        onClick={handleCreateType}
-                    >
-                        <FormattedMessage
-                            id='badges.rhs.create_type'
-                            defaultMessage='+ Создать тип'
-                        />
-                    </button>
-                )}
             </div>
         );
     };
 
+    const renderFab = () => {
+        if (currentView === RHS_STATE_ALL && canCreateBadge) {
+            return (
+                <TooltipWrapper
+                    tooltipContent={
+                        <FormattedMessage
+                            id='badges.rhs.create_badge'
+                            defaultMessage='Создать достижение'
+                        />
+                    }
+                >
+                    <button
+                        className='AllBadges__fab'
+                        onClick={handleCreateBadge}
+                    >
+                        {'+'}
+                    </button>
+                </TooltipWrapper>
+            );
+        }
+        if (currentView === RHS_STATE_TYPES && canCreateType) {
+            return (
+                <TooltipWrapper
+                    tooltipContent={
+                        <FormattedMessage
+                            id='badges.rhs.create_type'
+                            defaultMessage='Создать тип'
+                        />
+                    }
+                >
+                    <button
+                        className='AllBadges__fab'
+                        onClick={handleCreateType}
+                    >
+                        {'+'}
+                    </button>
+                </TooltipWrapper>
+            );
+        }
+        return null;
+    };
+
     const renderContent = () => {
         switch (currentView) {
         case RHS_STATE_TYPES:
@@ -205,7 +227,10 @@ const RHS: React.FC = () => {
         return (
             <div className='AllBadges'>
                 {renderTabs()}
-                {renderContent()}
+                <div className='AllBadges__content'>
+                    {renderContent()}
+                    {renderFab()}
+                </div>
             </div>
         );
     }