fix: form layout issue in mobile device (halo-dev#107)

修复表单在移动端设备下的布局问题。

before:

<img width="443" alt="image" src="https://github.com/halo-dev/plugin-comment-widget/assets/21301288/1994f7aa-eaf7-4f8b-92af-e2e50909221f">


after:

<img width="519" alt="image" src="https://github.com/halo-dev/plugin-comment-widget/assets/21301288/09459c5a-854d-4e2a-a0ab-4e01ce60004a">

/kind bug

```release-note
修复表单在移动端设备下的布局问题。
```

packages/comment-widget/src/base-form.ts

@@ -167,18 +167,16 @@ export class BaseForm extends LitElement {
           : ''}
 
         <div class="form__footer">
-          <div class="form-account">
-            ${this.currentUser ? this.renderAccountInfo() : ''}
-            ${!this.currentUser && !this.allowAnonymousComments
-              ? html`<button
-                  @click=${this.handleOpenLoginPage}
-                  class="form__button--login"
-                  type="button"
-                >
-                  登录
-                </button> `
-              : ''}
-          </div>
+          ${this.currentUser ? this.renderAccountInfo() : ''}
+          ${!this.currentUser && !this.allowAnonymousComments
+            ? html`<button
+                @click=${this.handleOpenLoginPage}
+                class="form__button--login"
+                type="button"
+              >
+                登录
+              </button> `
+            : ''}
           <div class="form__actions">
             <emoji-button @emoji-select=${this.onEmojiSelect}></emoji-button>
             <button type="submit" class="form__button--submit">
@@ -334,12 +332,16 @@ export class BaseForm extends LitElement {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 0.75em;
       }
 
       .form__actions {
         display: flex;
         align-items: center;
         gap: 0.75em;
+        flex: 1 1 auto;
+        justify-content: flex-end;
       }
 
       .form__button--submit {