[FIX] web: scroll in the command palette on firefox

Before this commit, it is impossible to scroll with the arrows
in the command palette on Firefox.

Using a <span> to wrap the commands made the offsetTop value wrong on
Firefox and the offsetHeight value wrong on Google Chrome.
So we replaced the <span> with a <div> which solves the problems. So we
will be able to use this <div> in the scrollTo and not its child.

X-original-commit: f52eb7ee6b93aef0c5b80744127548b0a2fdb4fd
Part-of: odoo/odoo#76613

addons/web/static/src/webclient/commands/command_palette.js

@@ -212,7 +212,7 @@ export class CommandPalette extends Component {
 
         const listbox = this.el.querySelector(".o_command_palette_listbox");
         const command = listbox.querySelector(`#o_command_${nextIndex}`);
-        scrollTo(command.children[0], listbox);
+        scrollTo(command, listbox);
     }
 
     onCommandClicked(index) {

addons/web/static/src/webclient/commands/command_palette.xml

@@ -16,9 +16,9 @@
             <div class="o_command_category" t-key="category.keyId">
               <t t-foreach="category.commands" t-as="command">
                 <t t-set="commandIndex" t-value="state.commands.indexOf(command)" />
-                <span t-attf-id="o_command_{{commandIndex}}" class="o_command" t-att-class="{ focused: state.selectedCommand === command }" t-on-click="onCommandClicked(commandIndex)" t-on-mouseenter="onCommandMouseEnter(commandIndex)" t-key="command.keyId">
+                <div t-attf-id="o_command_{{commandIndex}}" class="o_command" t-att-class="{ focused: state.selectedCommand === command }" t-on-click="onCommandClicked(commandIndex)" t-on-mouseenter="onCommandMouseEnter(commandIndex)" t-key="command.keyId">
                   <t t-component="command.Component || DefaultCommandItem" name="command.name" t-props="command.props" t-on-close="props.closeMe()" t-on-execute-command="executeCommand(command)"/>
-                </span>
+                </div>
               </t>
             </div>