Reposition and resize the quick actions command panel

Author: robertpiosik

packages/vscode/src/view/frontend/home/HomeView/HomeView.module.scss

@@ -30,19 +30,15 @@
   display: flex;
   flex-direction: column;
   padding: var(--padding-4px) 0 var(--padding-12px) 0;
-  &--with-commands-tooltip-visible {
-    padding: var(--padding-4px) 0 92px 0;
-  }
 }
 
 .commands {
   position: absolute;
   z-index: 1;
   bottom: calc(24px + 16px + 1px + 4px);
-  left: 0;
-  margin: 0 8px;
+  right: 8px;
   padding: 4px 0;
-  width: calc(100% - 16px);
+  width: 65vw;
   border-radius: var(--border-radius-4px);
   transform: translateY(5px);
   transition: all 0.1s ease-in-out;
@@ -90,9 +86,10 @@
 
     &--buy-me-a-coffee {
       background-color: #f7d600;
+      transition: all 0.2s ease-in-out;
 
       &:hover {
-        background-color: #ebcb00;
+        transform: scale(1.1) rotate(-7deg);
       }
 
       > svg {

packages/vscode/src/view/frontend/home/HomeView/HomeView.tsx

@@ -225,12 +225,7 @@ export const HomeView: React.FC<Props> = (props) => {
             height: '100%'
           }}
         >
-          <div
-            className={cn(styles.inner, {
-              [styles['inner--with-commands-tooltip-visible']]:
-                is_showing_commands
-            })}
-          >
+          <div className={styles.inner}>
             <div className={styles.top}>
               <div ref={switch_container_ref}>
                 <UiSwitch
@@ -264,11 +259,6 @@ export const HomeView: React.FC<Props> = (props) => {
                     max_width={dropdown_max_width}
                   />
                 )}
-                {/* <IconButton
-                  codicon_icon="settings-gear"
-                  title="Settings"
-                  on_click={props.on_settings_click}
-                /> */}
               </div>
             </div>
 
@@ -449,6 +439,7 @@ export const HomeView: React.FC<Props> = (props) => {
             styles['footer__button--buy-me-a-coffee']
           )}
           href="https://buymeacoffee.com/robertpiosik"
+          title="Support author"
         >
           <Icon variant="BUY_ME_A_COFFEE" />
         </a>
@@ -458,6 +449,7 @@ export const HomeView: React.FC<Props> = (props) => {
             styles['footer__button--filled']
           )}
           href="https://x.com/CodeWebChat"
+          title="@CodeWebChat"
         >
           <Icon variant="X" />
         </a>
@@ -468,6 +460,7 @@ export const HomeView: React.FC<Props> = (props) => {
           )}
           href="https://www.reddit.com/r/CodeWebChat/"
           style={{ overflow: 'hidden' }}
+          title="Join /r/CodeWebChat"
         >
           <Icon variant="REDDIT" />
           <span style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}>
@@ -489,6 +482,7 @@ export const HomeView: React.FC<Props> = (props) => {
           onClick={() => {
             set_is_showing_commands(!is_showing_commands)
           }}
+          title="Important commands at a glance"
         >
           {is_showing_commands ? (
             <span className="codicon codicon-chevron-down" />